通過命令行 node -v 查看是否安裝node環境
在 nodejs 和 webpack已安裝的前提下，隨便一個文件夾下，輸入命令行
npm install vue-cli -g
安裝完成后，通過 vue -V 查看版本號驗證是否安裝成功
通過vue-cli 初始化vue項目
輸入命令行新建 vue-demo 項目
vue init webpack vue-demo(項目名)
然后就可以一路回車鍵了
$ vue init webpack vue-demo ? Project name (vue-demo) ? Project name vue-demo ? Project description (A Vue.js project) ? Project description A Vue.js project ? Author (xxx <xxx@123.com>) ? Author xxx<xxx@123.com> ? Vue build standalone ? Install vue-router? (Y/n) y ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n //是否使用ESLint管理代碼 ? Use ESLint to lint your code? No ? Set up unit tests (Y/n) n ? Set up unit tests No ? Setup e2e tests with Nightwatch? (Y/n) n ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recom ? Should we run `npm install` for you after the project has been created? (recom mended) npm vue-cli · Generated "vue-demo". # Installing project dependencies ... # ========================
ESLint的用途：
- 1.審查代碼是否符合編碼規范和統一的代碼風格；
- 2.審查代碼是否存在語法錯誤；
在項目中使用 ESLint 總是會報各種錯誤，所以開發的時候我一般是不開啟的
安裝完成后，會顯示
# Project initialization finished! # ======================== To get started: cd vue-demo npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
這時如果直接運行 npm run dev 會報錯，需要再安裝項目依賴
進入到 vue-demo 文件夾下，執行命令行
cd vue-demo npm install(或者是cnpm install)
執行完成后，在 vue-demo 文件夾下新增 node_modules 文件
啟動服務，執行命令行
$ npm run dev
> vue-demo@1.0.0 dev E:\mytest\vuetest\vue-demo > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 3868ms15:24:20 I Your application is running here: http://localhost:8081
在瀏覽器中輸入 localhost:8081 訪問頁面，如果想要自動啟動瀏覽器頁面，需要在 config/index.js文件中修改相關配置
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,//是否自動啟動瀏覽器
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
修改autoOpenBrowser：true,
Ctrl+C 退出服務后再啟動 npm run dev 就可以自動打開網頁
運行流程：
補充一點:添加 favicon.ico 圖標
https://blog.csdn.net/guzhao593/article/details/93972303
標簽頁圖標favicon報錯問題 1.修改配置 build/webpack.dev.conf.js
var path = require('path')
module.exports = merge(baseWebpackConfig, {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: 'favicon.ico' // 增加
}),
]
})
2.favicon.ico 存放根目錄 3.index.html引入路徑
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
適配移動端flexible.js
適用於最新版vue-cli,配置手淘的lib-flexible.js和rem實現移動端頁面自適應
1.安裝lib-flexible.js
npm install lib-flexible --save
2.在項目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.px轉換rem
使用 webpack 的 px2rem-loader,自動將px轉換為rem
安裝px2rem-loader
npm install px2rem-loader --save-dev
4.配置px2rem-loader
首先找到 build/utils.js文件，在utils.js中添加如下配置
找到generateLoaders方法，在函數里如下配置
這里最重要的就是要在上圖兩個位置都要加上px2remLoader，不然不會起作用！！！
5.px2rem 用法
安裝px2rem后，再使用px上有些不同，大家可以參考px2rem官方介紹，下面簡單介紹一下。
- 直接寫px，編譯后會直接轉化成rem —- 除開下面兩種情況，其他長度用這個
- 在px后面添加/no/，不會轉化px，會原樣輸出。 — 一般border需用這個
- 在px后面添加/px/,會根據dpr的不同，生成三套代碼。—- 一般字體需用這個
示例代碼
編譯前（自己寫的代碼）
.example{
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
編譯后
.example{
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
這樣基本配置就完成了，重啟項目就可以使用lib-flexible+rem編寫移動端頁面了
注意：vue移動端 border 或分割線中的 1px 不希望被轉成 rem，只要再后面寫上注釋 /*no*/ 就可以了
參見：https://blog.csdn.net/Coding_Jia/article/details/78866220
npm相關
npm -v：查看 npm 版本。npm list：查看當前目錄下都安裝了哪些 npm 包。npm info 模塊：查看該模塊的版本及內容。npm i 模塊@版本號：安裝該模塊的指定版本。
在平時使用 npm 安裝包的過程中，你可能需要知道一些 npm 基本知識：
i/install：安裝。使用install或者它的簡寫i，都表明你想要下載這個包。uninstall：卸載。如果你發現這個模塊你已經不使用了，那么可以通過uninstall卸載它。g：全局安裝。表明這個包將安裝到你的計算機中，你可以在計算機任何一個位置使用它。--save/-S：通過該種方式安裝的包的名稱及版本號會出現在package.json中的dependencies中。dependencies是需要發布在生成環境的。例如：ElementUI是部署后還需要的，所以通過-S形式來安裝。--save-dev/-D：通過該種方式安裝的包的名稱及版本號會出現在package.json中的devDependencies中。devDependencies只在開發環境使用。例如：gulp只是用來壓縮代碼、打包的工具，程序運行時並不需要，所以通過-D形式來安裝。