vue安裝及環境搭建

vue項目在pycharm里運行需要安裝一個插件，打開settings，找到plugins，里面搜索vue.js,點擊安裝。

vue安裝

先安裝node.js

npm install -g @vue/cli

vue create my-project
cd my_project

npm run serve

npm install axios

中間的一些選擇就不寫了

 提示是否使用以前的router  選擇no 詢問是否保存項目將來使用 選擇yes  選擇依賴包（1，4，5 ==》router，vuex）

Axios中文文檔：https://www.kancloud.cn/yunye/axios/234845

 

vue項目的運行：

在webstorm里直接打開創建好的目錄，在pycharm里也可以，只是在pycharm里需要安裝一個插件，點第一行會出來提示安裝的信息。

 

點開項目運行按鈕旁邊的editconfigitions，左上角的+號 選擇npm，彈出的框里scripts選擇serve，這樣就不用再輸入命令才能打開vue項目了。

 

vue項目常用依賴包命令安裝

接下來是一些常見的依賴包
1.webpack模塊打包
    npm install –save-dev webpack
    4.0以上版本使用 npm install –save-dev webpack-cli
    webpack 與 less最好不要全局安裝，否則可能導致webpack的版本差異

2.babel 可以將es6語法轉為es5
    npm install babel-core –save-dev
    npm install babel-loader –save-dev
    安轉完后可能會導致webpack無法使用 需要重新安裝

3.css-loader 將css解析成模塊，將解析的內容插入到頁面
    npm install css-loader style-loader –save-dev

4.解析圖片
    file-loader url-loader(依賴於file-loader)
    npm install file-loader url-loader –save-dev

5.需要解析html插件
    插件的作用是以我們自己的html為模板將打包后的結果，自動引入到html中產出到dist目錄下
    npm install html-webpack-plugin –save-dev

6.webpack-dev-server
    內置一個服務 可以啟動一個端口號，當代碼更新時可以自動打包（內存中打包）
    不生成實際的文件 監聽代碼當代碼有變化就重新執行
    npm install webpack-dev-server –save-dev
    安裝提示無權限時 cmd可以用管理員模式打開
    package.json中 script “dev”: “webpack-dev-server”

 7.這里介紹如何使用npm一鍵安裝package.json里的 dependencies 和devDependencies里的所有模塊。

npm install 默認安裝package.json中的所有模塊。

 8.這里安裝的package.json中所有依賴的模塊，都是package.json中指定的版本。如果需要安裝最新的版本則要：

npm update <package_name>//要安裝的模塊的名字