Vue.js-創建Vue項目(Vue項目初始化)並不是用Webstrom創建,只是用Webstrom打開


我犯的錯誤:作為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項目。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM