1.node.js 安装 更新版本
- windows安装直接在官网下载 下载地址:http://nodejs.cn/download/
- win7 对应最高node版本是13.14.0
- 使用vue create 需要node版本为12.0.0 或大于 14.0.0
- 更新直接把安装包里的内容覆盖到nodejs文件夹
- 查找nodejs where node
2.安装vue cli
- npm install -g vue-cli
3.创建vue项目
- vue init webpack 项目名称
Project name —> 项目名称 (非必填,默认上面的项目名)
Project description —> 项目描述 (非必填)
Author —> 作者(非必填)
Install vue-router—> 路由器 Y
Use ESLint to lint your code—> 单元测试包 N
Set up unit tests—> 单元测试包 N
最后一个是选择下载方式 npm
4.vue 引入element-ui
npm install
npm i element-ui -s
npm install axios
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
5.vue打断点
- debugger
6.vue 路由
- 开发环境
proxyTable: {
‘/api’: {
target: ‘目标ip+端口号’
}
},
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: ''
}
},
// 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: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
- 生产环境
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
//path是node.js的路径模块,用来处理路径统一的问题
const path = require('path')
module.exports = {
dev: {
// 引入当前目录下的dev.env.js,用来指明开发环境,详见(2)
//env: require('./dev.env'),
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '指定路由',//例如/log
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
// 下面是dev-server的端口号,可以自行更改
port: 10088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
// 下面表示是否自定代开浏览器
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
//导入prod.env.js配置文件,只要用来指定当前环境
//env: require('./prod.env')
// Template for index.html
//相对路径的拼接,假如当前根目录是config,那么下面配置的index属性的属性值就是dist/index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
//定义的是静态资源的根目录
assetsRoot: path.resolve(__dirname, '../dist'),
//静态资源根目录的子目录static,也就是dist目录下的static
assetsSubDirectory: 'static',
//定义的是静态资源的公开路径,真正引用路径
assetsPublicPath: './',
/**
* Source Maps
*/
//是否生成生产环境sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
// 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置
bundleAnalyzerReport: process.env.npm_config_report
}
}