vscode項目配置 vue-loader-webpack

使用vsCode進行項目配置

1、準備工做

　　1.下載Visual Studio Code 下載地址

　　2.打開vscode，根據本身需求下載相應插件，能夠提升工做效率。

• • 點擊下角選項（我做了紅框標記），右側會出現能夠下載的插件　　。
  • 選擇插件，點擊install便可下載。（藍色框裏是我下載好的插件，供參考。）

　　  　　　

　　3.更改用戶設置

• • 快捷鍵：ctrl+shift+p ，輸入Preferences: Open User Settings，即出現下面的用戶設置settings。
  • 在上面的搜索框裏輸入：Auto Save。更改Auto Save爲onFocusChange。意思是失焦即自動保存。此項設置能夠爲咱們節省時間，省心。
  • 還可進行其餘設置更改， Font Size：20； |  Font Family：Menlo, Monaco, 'Courier New', monospace； |  Tab Size：2；|   window.zoomlevel：2;  |   Workbench: Icon Theme： vscode-icons

　　  　　  

2、項目配置

　　　1. 新建一個文件夾, 放置公司項目（個人文件夾命名是VUE_SSR_TECH），用vscode打開該文件

　　　2. 打開命令行--快捷鍵是ctrl+·（·是ESC下面那個鍵盤）

　    （一） 初始化npm項目。

　　　　　1.在命令行輸入：npm.init,都用默認的便可，直接按enter。最後會生成一個package.json文件。（有的項目可省略該步驟）

　　　  　　 

　　　　　2. 使用npm install安裝webpack、vue、vue-loader，在命令行輸入: npm i webpack vue vue-loader

　　 　　　   

　　　　　　安裝好後，會出現以下的warn：

　　　　　　

　　　　　　它提示咱們缺乏css-loader做爲它的peer--第三方依賴，根據提醒安裝它須要的依賴便可。命令行輸入：npm i css-loader vue-template-compiler。等待一會，就安裝好了。

　　　 　　 

　　　　　 至此，初始化項目就安裝好了！輸入npm run dev可運行項目了。

　　　（二）若不是已經建好的項目，各個文件夾須要本身配置的話，看下面的步驟。

　　　　　　左側欄，點擊右鍵新建文件夾-New Folder，命名爲src做爲源碼放置的目錄

　　　　　　src下新建文件--New File,命名爲app.vue,輸入模版以下

　　　　　

　　　　新建文件，命名爲webpack.config.js

　　　　src下新建文件。命名爲index.js

　　　　後面卡住了！！！！。。。

　　　　未完，待續。。。