vuecli3创建项目

1.创建vue项目模板

1.1 创建项目

vue create my-project

1.2 创建配置详解

关于 preset

有默认和手动两个选项

选择手动的配置(点击空格选中)

1. Babel 转码
2. TypeScript 根据实际需要是否使用TypeScript进行开发
3. Progress Web App (PWA) Support 关于PWA的相关知识自行度娘就好
4. Router 路由配置
5. Vuex 状态管理
6. CSS css 预处理器
7. Linter / Formatter 格式检查
8. Unit Testing 单元测试
9. E2E Testing 这个没用过

接下来,这是为router的是否选择为history

接下来,eslint检查

接下来,选择lint on save(保存时检查)

接下来,选择lint on save(保存时检查)

接下来,是否保存这次得选择,如果选择要起一个名字,方便下次直接使用

接下来,开始生成项目

生成的项目文件目录

1.3 安装iview(淘宝镜像 --registry=https://registry.npm.taobao.org)

npm install iview --save --registry=https://registry.npm.taobao.org

在main.js中引入

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
复制代码

vue.config.js配置(在别处看到的保存下来)

module.exports = {
  baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {//除了 entry 之外都是可选的
      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: 'public/index.html',// 模板来源
      filename: 'index.html',// 在 dist/index.html 的输出
      title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};
复制代码

Vue之自定义组件的v-model(别人写的很清楚)

www.cnblogs.com/wind-lanyan…

关于ie兼容

安装es6-promise,babel-polyfill

npm install es6-promise -S

npm install babel-polyfill -S

<!--在main.js中引入-->
import promise from "es6-promise";
promise.polyfill();
import "babel-polyfill";
复制代码

路由懒加载

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

把组件按组分块

在配置路由的时候,引入页面使用 webpackChunkName

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
复制代码

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

转载于:https://juejin.im/post/5ce24890f265da1bac3fe867