一、安裝node環境
安裝成功后，輸出版本號測試，如圖表示安裝成功。

二、搭建vue項目環境
1、全局安裝vue-cli
npm install --global vue-cli
安裝成功后，可以使用vue命令

2、創建項目
（1）新建項目空間 D:\ZSZJ_HTML\vue
（2）創建一個基于 webpack 模板的新項目: vue init webpack vue-demo01


vue腳手架搭建報錯,執行下列兩個命令，既可以創建
npm i vue-cli -g
npm install -g webpack

繼續執行命令 vue init webpack vue-demo01

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

3、進入項目：cd vue-demo，安裝依賴
項目創建后，若沒有node_modules,則執行命令 npm i ，下載相關依賴

4、npm run dev，啟動項目
進入項目目錄 cd vue-demo01

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

三、vue項目目錄講解

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

四、開發vue項目業務開發
1、在components目錄下新建一個views目錄，里面寫我們的vue組件
D:\ZSZJ_HTML\vue\vue-demo01\src\components

1）開始我們的第一個組件：
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的安裝及應用
npm install -g yarn
查看版本：yarn --version

yarn的常用命令：
（1）創建文件夾 md yarn
（2）進入yarn文件夾 cd yarn
（3）初始化項目 yarn init // 同npm init，執行輸入信息后，會生成package.json文件
（4）yarn的配置項：

yarn config list // 顯示所有配置項

yarn config get //顯示某配置項

yarn config delete //刪除某配置項

yarn config set [-g|–global] //設置配置項
（5）安裝包：

yarn install //安裝package.json里所有包，并將包及它的所有依賴項保存進yarn.lock

yarn install --flat //安裝一個包的單一版本

yarn install --force //強制重新下載所有包

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

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

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

yarn add [package] //在當前的項目中添加一個依賴包，會自動更新到package.json和yarn.lock文件中

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。