vue學習筆記（一）： 創建 vue-cli 初始網站

在安裝vue-cli以前，要先安裝node.js這個你們百度一下就能夠了

一、安裝 vue-cli

npm install -g @vue/cli-init

二、初始化一個項目，名爲 hcmanage ,並選擇使用 webpack 打包方式

vue init webpack hcmanage 

三、切換到 hcmanage 目錄下

cd hcmanage 

最終生成的網站文檔結構以下

四、啓動 hcmanage 網站

npm run dev

    執行結果以下：

PS E:\系統源碼\vue\hcmanage> npm run dev

> hcmanage@1.0.0 dev E:\系統源碼\vue\hcmanage
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10%  11% 11% 11% 12% 12% 13% building modules 25/35 modules 10 active ...ex=0!E:\系統源碼\vue\hcmanage\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 13% 13% 13% 15% 15% 15% 95% emitting                                                                           

 DONE  Compiled successfully in 26954ms                                                                                     9:34:52 PM
 I  Your application is running here: http://localhost:8080

    能夠看到最終生成的網址爲：http://localhost:8080

    這個網址能夠在config/index.js進行修改，以下圖：

 

 能夠在瀏覽器中輸入對應的網址：http://localhost:8080 能夠看到如下的網站頁面，表示網站生成成功

異常問題及處理：

一、Trailing spaces not allowed

緣由：文件中行後有空格

解決方法：把空格去除就能夠了

二、Expected linebreaks to be 'LF' but found 'CRLF'

緣由：由於操做系統不一樣致使默認換行符不同致使的

解決方法：找到 .eslintrc.js ，在文件的Rules中增長一條rule :

'linebreak-style': [0, 'error', 'windows']

三、Missing semicolon

緣由：丟失分號，JS中有的語句沒有分號結尾

解決方法：對應的語句後面添加分號就能夠了

四、Missing trailing comma

緣由：這個是 json 對象後面沒有逗號

解決方法：在 json 對象報錯的行數後面添加逗號就能夠了

五、Unexpected use of file extension "vue" for "./components/****.vue"

緣由：引用文件的時候加上了後綴名.vue

解決方法：去掉後綴名.vue

六、Unexpected use of file extension "js" for "./components/****.js"

緣由：引用文件的時候加上了後綴名.js

解決方法：去掉後綴名.js

七、Expected exception block, space or tab after '//' in commen

緣由：這個是註釋符後面的縮進有問題

解決方法：在註釋符 ’//‘ 後加加個空格、tab、block 就能夠了