1.npm -v
2.vue -V
3.npm install -g vue-cli 首先全局安裝vue-cli
4.npm install -g vue-cli --registry=https://registry.npm.taobao.org 安裝淘寶鏡像,比較快
5.vue init webpack h5master 然后,利用vue-cli構建一個vue項目,並安裝項目依賴
6.cd h5master cd進項目目錄里
7.npm install 安裝依賴
8.項目中使用了sass vue-router vuex querystring等庫,先安裝相關依賴包
//npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev(這里可以按需安裝,如下)
npm install less --save-dev 安裝less 容易處理css
7.移動端使用的前端樣式框架 vant 參看官網:https://youzan.github.io/vant/#/zh-CN/form
npm i vant -S
8.按照官方按需導入
babel-plugin-import是一款 babel 插件,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式
8.1安裝插件
npm i babel-plugin-import -D
8.2配置插件
在.babelrc 或 babel.config.js 中添加配置:
{
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
8.3引入組件
所以我們在 src/components 下新建 vant.js ,寫入:
import Vue from 'vue'
import { Button } from 'vant';
Vue.use(Button);
在main.js中引用
import '@/components/vant.js'
8.4 端口配置
有時候我們會開啟多個服務器進行模擬,為了解決沖突,有時候我們需要更改8080端口,我們可以在根目錄下新建 vue.config.js 中:
module.exports = {
devServer: {
port: 5000
}
}
8.npm run dev 啟動項目