【vue】使用记录1

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
    }
}