1.安装node.js
2.全局安装webpack
npm webpack install -g
3.安装vue--cli
npm install -g vue-cli
vue-cli脚手架:
- 他与webpack一起工作
- 他提供了一套基础的、可直接使用的vue项目模板
3.创建一个基于webpack的vue项目
vue init webpack project
4.运行项目
npm run dev
5.安装一些插件
npm install vue-router --save
npm install vue-resource --save
npm install vuex --save
6.README.md 项目说明文件package.json 依赖包,开发项目所需要第三方模块的依赖 package-lock.json确定第三方包的版本
Index.html 首页入口文件
static 静态资源 静态图片
src 开发的主要目录,项目的源代码 main.js入口文件 App.vue根组件
node-modules 以来的第三方node包
config 项目的配置的文件 index基础配置信息 dev.env.js开发环境配置信息 prod.env.js线上环境
build 项目打包的webpack的配置内容 webpack.base.config.js 基础 webpack.dev.conf.js 开发 webpack.prod.conf.js 线上
7.使用vant 组件库适配
1.安装lib-flexible
npm i lib-flexible --save
2.在main.js中引入lib-flexible
import 'lib-flexible/flexible';
安装px2rem-loader(用于将px转换为rem的工具)
3.npm install px2rem-loader
4.配置px2rem-loader
// 在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 // 这里设置html根字体,通常设置为设计稿宽度的 1/10。vant-UI的官方根字体大小是37.5
}
}
5.在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
。。。。
}
6.安装Vant组件库
npm i vant -S
7.按需引入vant 需安装插件babel-plugin-import
npm i babel-plugin-import -D
8.在babelrc中配置:
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
],
全局引入vant
import Vue from vue
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);