腳手架vue cli從不會到入坑

2021-08-07 20:09:42 字數 1855 閱讀 1538

一、安裝vue-cli

前提是已經安裝了node.js(首選6.x版本)、npm(3.x版本)

1、然後輸入命令npm install -g vue-cli,進行全域性安裝

安裝完成,輸入vue -v(必須大寫),檢視vue版本

2、vue -h檢視幫助文件

init:從指定模板中生成乙個新的專案

list:列出所有的可用的官方模板

vue list檢視官方那個模板有以下6種:

二、建立專案

vue init

template-name:模板名稱,上面官方提供的6種

webpack:擁有高階功能的webpack+vue-loader用於正式開發,下面也是以此為例

webpack-******:擁有基礎功能的webpack+vue-loader用於快速原型開發

project-name:專案名稱,自己隨意根據自己的專案定義

使用webpack模板建立名稱為vue-xjw的專案:vue init webpack vue-xjw

專案建立成功:

前面是專案名稱、專案描述、作者

install vue-router?是否安裝vue-router

use eslint to lint your code? 是否用eslint來限制你的**錯誤和風格

setup unit tests with  karma + mocha? 是否需要安裝單元測試工具karma+mocha

setup e2e tests with nightwatch?是否安裝e2e來進行使用者行為模擬測試

此時生成檔案:

根據提示我們需要三步操作:

1、cd vue-xjw 進入vue-xjw專案目錄

2、npm install 安裝專案依賴項,package.json就是來配置依賴項的,安裝完成後vue-xjw專案檔案中多了node_modules資料夾

3、npm run dev 開發模式下執行我們的專案,專案修改了會立即更新到瀏覽器,不用重新整理瀏覽器

三、執行專案

瀏覽器效果:

預設埠8080,埠也是可以修改的,在config/index.js檔案下配置

npm run dev中dev就是package.json檔案下配置的乙個指令碼:

搭建vue cli腳手架

前期工作準備 2.安裝 映象,因為我們用的npm的伺服器是外國,有的時候我們安裝 依賴 的時候會超級慢,所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後,就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack,...

Vue cli腳手架基礎

vue cli是乙個vue腳手架,可以快速構造專案結構 vue cli本身整合了多種專案模板 很少簡單 webpack 包含eslint 規範檢查和unit單元測試等 webpack 沒有 規範檢查和單元測試 browserify 使用的也比較多 browserify 2.1 安裝vue cli,配...

vue cli腳手架安裝

映象使用方法 三種辦法任意一種都能解決問題,建議使用第三種,將配置寫死,下次用的時候配置還在 1.通過config命令 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 2.命令列指定 npm registry ...