< 返回 vue-cli3使用,傻瓜式的搭建
2018-09-12 04:31:49 评论: 0

vue-cli3 安装

确保安装有node环境,node版本要大于8.9

用npm:

npm install -g @vue/cli

用yarn

yarn global add @vue/cli

检查是否安装成功

vue --version

创建项目

命令行运行

vue create {project name}

根据提示一步一步来就可以了

vue-cli3还可以用命令行 vue ui 打开图形界面,进行创建项目以及配置,创建好项目, npm run serve 或者 yarn serve 就开启了服务

配置

vue-cli3基本不需要什么配置就可以运行项目了,如果要配置,我们就可以新建一个vue.config.js文件,运行服务时会自动加载这个文件,就再也不用担心改配置出一大堆错误了,真的是越来越人性化,简单化

######## 多页面应用配置 这里重点说一下多页面的配置,因为以前要使用多页面,需要改很多地方,vue-cli3让我们很简单的一点配置就可以使用开发多页面了

vue.config.js示例:

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><#%= htmlWebpackPlugin.options.title #%></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

配置超级简单,当然 src 目录也要改变一下,就可以把更多精力放在代码的编写上了哈

评论列表

请登录后评论! 登录