我犯的錯誤:作為vue小白,並不知道還要單獨去創建初始的vue項目,於是自己在webstrom中建了一個Empty Project,
在其中新增了一個js文件,就開始import Vue from “vue”了。運行后自然就報錯了:SyntaxError: Unexpected identifier,被自己蠢哭~
一、搭建一個vue項目最簡單的方式就是使用官方的腳手架工具vue-cli,他提供了現代前端工作流的構建設置,只需要幾分鍾時間就可以運行帶有熱更新 Eslint 打包功能的項目。
二、下面進入正題,vue項目初始化步驟如下:
1、默認你已經安裝好了Node.js、WebStrom、npm、vue/vue-cil、webpack。
2、win+R→cmd打開命令行,cd進入到希望創建vue項目的路徑,然后執行項目創建命令:
vue init webpack [projectName]
這里注意,項目名稱必須是小寫(原因是:大寫會導致跨平台出現問題),如果有大寫就會報錯:Sorry, name can no longer contain capital letters
上面的命令將會從 vuejs-template/webpack 上面拉取基於webpack配置的 vue 模版。
vue-cli 官方提供了幾種零配置的開發模版,這些模版里自動生成了應用的目錄、初始的代碼、項目的配置,能夠讓用戶更快的搭建 vue 項目。
當前官方提供的模版包括:
(1)webpack:功能齊全的webpack + vue-loader 的設置、熱重載、eslint、test 和 css 提取。
(2)webpack-simple:一個快速設置簡單的 webpack + vue-loader原型的模版。
(3)browserify:功能齊全的 browserify + 'vueify'設置與熱重負荷,linting和單元測試。
(4)browserify-simple:快速設置簡單的 browserify + 'vueify' 原型。
(5)pwa:基於webpack的vue-cli 的單頁面模版。
(6)simple:對 html 的簡單 vue 配置 。
3、在命令行中進入到項目路徑,然后執行npm install命令,安裝項目需要的依賴。
4、安裝完成后執行npm run dev命令,運行項目。
5、用Webstrom打開剛剛創建的vue項目。