一、安裝node環(huán)境
安裝成功后，輸出版本號(hào)測(cè)試，如圖表示安裝成功。

二、搭建vue項(xiàng)目環(huán)境
1、全局安裝vue-cli
npm install --global vue-cli
安裝成功后，可以使用vue命令

2、創(chuàng)建項(xiàng)目
（1）新建項(xiàng)目空間 D:\ZSZJ_HTML\vue
（2）創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack vue-demo01


vue腳手架搭建報(bào)錯(cuò),執(zhí)行下列兩個(gè)命令，既可以創(chuàng)建
npm i vue-cli -g
npm install -g webpack

繼續(xù)執(zhí)行命令 vue init webpack vue-demo01

說明：
Vue build ==> 打包方式，回車即可；
Install vue-router ==> 是否要安裝 vue-router，項(xiàng)目中肯定要使用到 所以Y 回車；
Use ESLint to lint your code ==> 是否需要 js 語法檢測(cè) 目前我們不需要 所以 n 回車；
Set up unit tests ==> 是否安裝 單元測(cè)試工具 目前我們不需要 所以 n 回車；
Setup e2e tests with Nightwatch ==> 是否需要 端到端測(cè)試工具 目前我們不需要 所以 n 回車；

3、進(jìn)入項(xiàng)目：cd vue-demo，安裝依賴
項(xiàng)目創(chuàng)建后，若沒有node_modules,則執(zhí)行命令 npm i ，下載相關(guān)依賴

4、npm run dev，啟動(dòng)項(xiàng)目
進(jìn)入項(xiàng)目目錄 cd vue-demo01

訪問地址：http://127.0.0.1:8080

三、vue項(xiàng)目目錄講解

1、build：構(gòu)建腳本目錄
　　　　1）build.js ==> 生產(chǎn)環(huán)境構(gòu)建腳本；
　　　　2）check-versions.js ==> 檢查npm，node.js版本；
　　　　3）utils.js ==> 構(gòu)建相關(guān)工具方法；
　　　　4）vue-loader.conf.js ==> 配置了css加載器以及編譯css之后自動(dòng)添加前綴；
　　　　5）webpack.base.conf.js ==> webpack基本配置；
　　　　6）webpack.dev.conf.js ==> webpack開發(fā)環(huán)境配置；
　　　　7）webpack.prod.conf.js ==> webpack生產(chǎn)環(huán)境配置；
2、config：項(xiàng)目配置
　　　　1）dev.env.js ==> 開發(fā)環(huán)境變量；
　　　　2）index.js ==> 項(xiàng)目配置文件；
　　　　3）prod.env.js ==> 生產(chǎn)環(huán)境變量；
3、node_modules：npm 加載的項(xiàng)目依賴模塊
4、src：這里是我們要開發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件：
　　　　1）assets：資源目錄，放置一些圖片或者公共js、公共css。這里的資源會(huì)被webpack構(gòu)建；
　　　　2）components：組件目錄，我們寫的組件就放在這個(gè)目錄里面；
　　　　3）router：前端路由，我們需要配置的路由路徑寫在index.js里面；
　　　　4）App.vue：根組件；
　　　　5）main.js：入口js文件；
5、static：靜態(tài)資源目錄，如圖片、字體等。不會(huì)被webpack構(gòu)建
6、index.html：首頁入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定義了項(xiàng)目的npm腳本，依賴包等信息
8、README.md：項(xiàng)目的說明文檔，markdown 格式
9、.xxxx文件：這些是一些配置文件，包括語法配置，git配置等

四、開發(fā)vue項(xiàng)目業(yè)務(wù)開發(fā)
1、在components目錄下新建一個(gè)views目錄，里面寫我們的vue組件
D:\ZSZJ_HTML\vue\vue-demo01\src\components

1）開始我們的第一個(gè)組件：
a：在views目錄下新建First.vue
b：在router目錄下的index.js里面配置路由路徑
D:\ZSZJ_HTML\vue\vue-demo01\src\router


c：template 寫 html，script寫 js，style寫樣式
D:\ZSZJ_HTML\vue\vue-demo01\src\components\views


d：輸入ip： http://localhost:8010/#/first

yarn的安裝及應(yīng)用
npm install -g yarn
查看版本：yarn --version

yarn的常用命令：
（1）創(chuàng)建文件夾 md yarn
（2）進(jìn)入yarn文件夾 cd yarn
（3）初始化項(xiàng)目 yarn init // 同npm init，執(zhí)行輸入信息后，會(huì)生成package.json文件
（4）yarn的配置項(xiàng)：

yarn config list // 顯示所有配置項(xiàng)

yarn config get //顯示某配置項(xiàng)

yarn config delete //刪除某配置項(xiàng)

yarn config set [-g|–global] //設(shè)置配置項(xiàng)
（5）安裝包：

yarn install //安裝package.json里所有包，并將包及它的所有依賴項(xiàng)保存進(jìn)yarn.lock

yarn install --flat //安裝一個(gè)包的單一版本

yarn install --force //強(qiáng)制重新下載所有包

yarn install --production //只安裝dependencies里的包

yarn install --no-lockfile //不讀取或生成yarn.lock

yarn install --pure-lockfile //不生成yarn.lock
（6）添加包（會(huì)更新package.json和yarn.lock）：

yarn add [package] //在當(dāng)前的項(xiàng)目中添加一個(gè)依賴包，會(huì)自動(dòng)更新到package.json和yarn.lock文件中

yarn add [package]@[version] // 安裝指定版本，這里指的是主要版本，如果需要精確到小版本，使用-E參數(shù)

yarn add [package]@[tag] // 安裝某個(gè)tag（比如beta,next或者latest） //不指定依賴類型默認(rèn)安裝到dependencies里，你也可以指定依賴類型：

yarn add --dev/-D // 加到 devDependencies yarn add --peer/-P // 加到 peerDependencies

yarn add --optional/-O // 加到 optionalDependencies //默認(rèn)安裝包的主要版本里的最新版本，下面兩個(gè)命令可以指定版本：

yarn add --exact/-E // 安裝包的精確版本。例如yarn add foo@1.2.3會(huì)接受1.9.1版，但是yarn add foo@1.2.3 --exact只會(huì)接受1.2.3版

yarn add --tilde/-T // 安裝包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde會(huì)接受1.2.9，但不接受1.3.0
（7）發(fā)布包
yarn publish
（8）移除一個(gè)包
yarn remove ：移除一個(gè)包，會(huì)自動(dòng)更新package.json和yarn.lock
（9）更新一個(gè)依賴
yarn upgrade 用于更新包到基于規(guī)范范圍的最新版本
（10）運(yùn)行腳本
yarn run 用來執(zhí)行在 package.json 中 scripts 屬性下定義的腳本
（11）顯示某個(gè)包的信息
yarn info 可以用來查看某個(gè)模塊的最新版本信息
（12）緩存
yarn cache
yarn cache list # 列出已緩存的每個(gè)包 yarn cache dir # 返回 全局緩存位置 yarn cache clean # 清除緩存

總結(jié)

以上是生活随笔為你收集整理的VUE示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。