(syntax)vue-cli
2022-10-20 10:31:20 #vue #语法

介绍 | Vue CLI

@vue/cli两部分组成

  • vue-cli 安装
    • npm install -g @vue/cli
    • vue create <project-name>
  • Preset + 插件(第三方包)
    • preset 预设 vim ~/.vuerc 远程/本地 Preset vue create --preset username/repo my-project
    • 插件 内建 vue add vuex 社区npm i vuex --save-dev
      • 区别 @vue/cli-plugin-vuex包 vs vuex包
      • vue add 会生成文件
  • vue.config.js 文件 配置参考 | Vue CLI

概念

  • Vue CLI 是一个基于Vue.js 进行快速开发的完整系统(脚手架工具)
  • @vue/cli(新版本) 和 vue-cli(旧版本)
  • 三个系统的组件（部分）组成 CLI 、CLI 服务、CLI 插件
    • CLI： (@vue/cli) 全局安装npm包 提供vue命令
    • CLI 服务：（@vue/cli-service ） 一个开发环境依赖 一个npm包 局部安装在每个@vue/cli
      • @vue/cli-service-global 快速开发的原型 单独运行vue文件 @vue/cli + @vue/cli-service-global
    • CLI 插件：（插件就是安装的第三方包npm 如axios elementUI这些） 向你的 Vue 项目提供可选功能的 npm 包 npm依赖包
      • @vue/cli-plugin- (内建插件 官方)
      • vue-cli-plugin- (社区插件 第三方)
  • @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset .vuerc 的 JSON 文件 vue config 可复用的 preset

安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 创建项目
vue create my-project 
vue ui
vue init webpack my-project
vue creat --help


// 安装vue/cli脚手架
npm i -g @vue/cli  // npm install -g @vue/cli@next
yarn global add @vue/cli  // yarn global add @vue/cli@next
// vue/cli脚手架版本
vue -version
// 更新vue-cli
npm update -g @vue/cli
yarn global upgrade --latest @vue/cli

// 快速原型开发
npm install -g @vue/cli-service-global
vue serve -h -o -c -p 8081 *.vue   //  vue serve开发环境 npm run serve  
vue serve MyComponent.vue
yarn serve
npx vue-cli-service serve
vue -d dist *.vue   // vue build npm run build  
vue build -t -n -d -h  
vue build MyComponent.vue // MyJavaScript.js
vue inspect

npx vue-cli-service help
// 插件 @vue/cli-plugin-
vue add eslint
npm i eslint
npm i -g elint 全局环境
// Preset 一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。
// CLI 服务

npm install vuex --save  // 生产环境(`dependencies`)   npm install vuex
npm install scss-loader --save-dev  // 开发环境 (`devDependencies`)

package.json

1
2
3
{
  "vuePlugins": { }
}

vue.config.js 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// module.export={ }
module.export = {
  	publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
 		outputDir: 'dist',
  	assetsDir: "assets",
    productionSourceMap: false,
    filenameHashing: false,
    lintOnSave: false,
 		pages: {  
        index: {
            entry: 'src/index/main.js',    
            template: 'public/index.html',
            filename: 'index.html',       
            title: 'Index Page',   
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }, 
     		subpage: 'src/subpage/main.js'
    },
    devServer: {
          open: true,
          host: 'localhost',
          port: 8080,
          https: false,
          hotOnly: false, 
          proxy: { 
              [process.env.VUE_APP_BASE_API]: {
                  target: process.env.VUE_APP_BASE_URL,
                  changeOrigin: true,
                  pathRewrite: {
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                  }
               }
              '/api': {
                  target: 'http://47.100.47.3/',  
                  ws:true,
                  changeOrigin: true, 
              },
              '/foo':{
                  target:'<other_url>'
              }
          },
      }
}
// defineConfig({ })
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 选项
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// const port = 8080; // 端口号
// const IS_PRODUCTION = process.env.NODE_ENV == "production"; // 正式环境
// const CompressionPlugin = require("compression-webpack-plugin");
// const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");
/** key 是import 的包名，value 是CDN 为我们提供的全局变量名 */
// const externals = {
//  "ali-oss": "OSS"
// };
module.export = {
    // 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
    // baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'
    // 项目中的public目录一般是部署在域名的根部，如果要用到public目录下的资源，需要配置publicPath。
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    // 输出文件目录：在npm run build时，生成文件的目录名称  生产环境构建文件的目录
    outputDir: 'dist',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: "assets",
    // indexPath: 'test/home.html', // build之后生成的index.html的路径
    // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    productionSourceMap: false,
    // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,
    // 代码保存时进行eslint检测
    lintOnSave: false,
    // webpack-dev-server 相关配置
    //在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
     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'
    },
    devServer: {
        open: true, // 自动打开浏览器
        host: 'localhost',
        port: 8080,// 端口
        https: false,
        hotOnly: false, // 热更新   
        proxy: {  // 使用代理 解决跨域问题
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                  ["^" + process.env.VUE_APP_BASE_API]: ""
                }
             }
            '/api': {
                target: 'http://47.100.47.3/',  // 目标代理服务器地址
                ws:true,
                changeOrigin: true, // 开启代理，本地创建一个虚拟服务器 允许跨域
            },
            '/foo':{
                target:'<other_url>'
            }
        },
    },
}

vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// vue文件 组件使用三步 使用组件 导入组件 组件注册
<template>
  <h2 class="red">Hello {{ msg }}</h2>
	<hello></hello> // 使用组件
</template>
<script>
import hello from './componets/HelloWorld.vue'  // 导入组件
export default{
    name: 'World',
  	components:{
      HelloWorld // 注册组件
    }, 
    props:{  // props 参数 和 data 参数 
        msg:{
            type: String,  // 数据类型 String 是大写的
            default: "test msg"  //默认值
        }
    },
    methods:{
    },
    data(){
       return{
          msg:'test msg'
      }
    },
  	watch:{},
  	computed:{}
}
</script>
<style scoped>
</style>
上一页
2022-10-20 10:31:20 #vue #语法
下一页