npm創建vue項目


1. 安裝node.js

   地址:https://www.runoob.com/nodejs/nodejs-install-setup.html

   查看版本:node --version

   

   查看npm版本: npm -v

   

   安裝cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org  

 

2. 安裝VUE-CLI腳手架

vue腳手架指的是vue-cli,它是一個專門為單頁面應用快速搭建繁雜的腳手架,它可以輕松的創建新的應用程序而且可用於自動生成vuewebpack的項目。

安裝腳手架:npm install -g @vue/cli     cnpm install vue-cli -g

注:-g代表全局安裝

查看版本(是否安裝):vue -V

3. 創建一個基於webpack模版的項目

1) Vue項目初始化命令如下,若沒有安裝webpack則先安裝webpack

     npm install -g webpack

 

2)   創建項目

     Vue init webpack myVue     

       注:安裝過程中有個選項(Use ESlint to line your code?選擇No

      

 

 

      運行初始化命令的時候會讓用戶輸入幾個基本的選項,如項目名稱、描述、作者等信息,如果不想填寫回車默認就好.

l Project name (my-vue):項目名稱

l Project description (A Vue.js project)項目描述一個Vue.js項目

l Author:作者

l Install vue-router?(Y/n):是否安裝Vue路由,也就是以后是spa(單頁面應用

l Use ESLint to lint your code?(y/n):使用ESlint到你的代碼?(y/n

l Pick an ESlint preset(Use arror keys):選擇一個預置ESLint(使用箭頭)

l Setup unit tests with Karma +Mocha?(y/n):設置單元測Karma +Mocha?(Y/N)

l Set e2e tests with Nightwatch?(y/n):設置端到端測試,NightWatch?(y/n)

注:這些都看個人情況設置

初始化完后的vue項目目錄如下:

   

3) 進入到myVue目錄下,使用npm install 安裝package.json包中的依賴,命令如下:

cd myVue

npm install

4)  運行項目

  npm run dev    cnpm run dev

 

 

 

在瀏覽器上輸入:localhost:8080,將會出現下面的vue初始界面

 

5) 結束項目運行:

      Ctrl+v,選擇Y即可停止項目的運行

 

 


免責聲明!

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



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