vue3.0创建一个项目

使用vue3.0创建一个项目

1. 使用Vue UI创建、管理项目
2. 项目结构目录整理
3. 初始文件添加
4. 基本配置
5. 跨域配置

环境配置

下面尝试用test、preview、production分别表示测试、预览、生产三种环境

修改package.json文件如下

"scripts":{
    "serve":"vue-cli-service serve",
    "test":"vue-cli-service build --mode test",         //测试
    "preview":"vue-cli-service build --mode preview",   //预览
    "build":"vue-cli-service build --mode production"   //生产
    "lint":"vue-cli-service lint" 
}

在项目根目录下新建 .env.test 、 .env.preview 、 .env.production文件，分别对应三个环境的配置文件，注意，名字要与 --mode后面的名字分别对应

.env.test代码如下

NODE_ENV = "test"
VUE_APP_BASE_URL ="测试环境域名"

.env.prod代码如下

NODE_ENV = "production"
VUE_APP_BASE_URL ="生产环境域名"

.env.pre代码如下

NODE_ENV = "preview"
VUE_APP_BASE_URL ="预览环境域名"

这样环境配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test         //测试
npm run prod       //生产
npm run pre         //预发布

另外说明一点事，本地环境会默认从.env.development文件中读取配置

所以记得需要新建一个然后存放配置

.env.development代码如下

NODE_ENV ="development"
VUE_APP_BASE_URL="本地环境域名"

项目配置

从vue-cli3.0 开始build和config目录就取消了，如果需要修改配置，可以在项目的根目录新建一个vue.config.js文件来覆盖项目的配置，访问官方文档查看详细配置

// vue.config.js
module.exports = {
  // 选项...
}

• baseUrl

  • 从 Vue CLI 3.3 起已弃用，请使用publicPath。

• publicPath

  • Type : string
  • Default : '/'　　
  • 用法和 webpack 本身的 output.publicPath 一致，不要直接修改webpack的output.publicPath

• outputDir

  • Type : string
  • Default : 'dist'
  • 提示： outputDir 而不要修改 webpack 的 output.path

• assetsDir

  • Type : string
  • Default : ' '
  • 提示： 从生成的资源覆写filename 或 chunkFilename时，assetsDir 会被忽略

• indexPath

  • Type : string
  • Default : 'index.html'
  • 指定生成的index.html 的输出路径(相对于 outputDir).也可以是绝对路径

• pages

  • Type : Object
  • Default : undefined
  • 在multi-page 模式下构建应用。每个"pages"应该有一个对应的Javascript入口文件。其值应该是一个对象，对象的key是入口的名字，value是：
    • 一个制定了entry, template, filename, title 和 chunks 的对象(除了 entry 之外都是可选的)
    • 或一个指定其entry的字符串

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

路由详解（一）--基础：

1. router-link和router-view组件
2. 路由配置
   1. 动态路由
   2. 嵌套路由
   3. 命名路由
   4. 命名视图
3. JS操作路由
4. 重定向和别名