Vue.js-建立Vue項目（Vue項目初始化）並非用Webstrom建立，只是用Webstrom打開

我犯的錯誤：做爲vue小白，並不知道還要單獨去建立初始的vue項目，因而本身在webstrom中建了一個Empty Project，

在其中新增了一個js文件，就開始import Vue from 「vue」了。運行後天然就報錯了：SyntaxError: Unexpected identifier，被本身蠢哭~

1、搭建一個vue項目最簡單的方式就是使用官方的腳手架工具vue-cli，他提供了現代前端工做流的構建設置，只須要幾分鐘時間就能夠運行帶有熱更新 Eslint 打包功能的項目。

2、下面進入正題，vue項目初始化步驟以下：

一、默認你已經安裝好了Node.js、WebStrom、npm、vue/vue-cil、webpack。

二、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 配置 。

 

三、在命令行中進入到項目路徑，而後執行npm install命令，安裝項目須要的依賴。

四、安裝完成後執行npm run dev命令，運行項目。

五、用Webstrom打開剛剛建立的vue項目。