Vue3 项目快速构建 - Cli

Vue3 项目快速构建 - Cli

安装

1

$ cnpm i @vue/cli -g

创建项目

1

$ vue create 项目名

这里我遇到一个问题：如何更改安装时的包管理器为yarn或npm？

执行vue create project 之后如果显示npm run serve 则表示你使用的是npm创建的项目

如果显示yarn serve则表示yarn创建

如何切换包管理器？

~/.vuerc

windows环境则存在在C:/user/administrator/ 下
打开此文件手动更改配置内容npm为yarn 或者直接删除.vuerc 重新创建项目

yarn

1. 安装

   1	$ cnpm i yarn -g

2. 项目的操作命令

   1 2 3

   $ yarn serve # 开发环境下启动项目 $ yarn build # 生产环境压缩打包项目，供项目上线 $ yarn lint # 检测js语法规范

目录介绍

1. dist 生产环境打包后的资源存放目录
2. node_modules 这里放置的都是项目的插件【第三方依赖【库】】
3. public 静态资源
   1. favicon.ico 网页的标题的logo
   2. index.html 项目的模板
      1. 提供vue的实例作用的范围容器
      2. 引入一些资源
      3. 建议： 不要去操作
4. src 源代码开发目录[ 程序员主要工作目录 ]
   1. assets 静态资源【图片、字体文件】
   2. components 公共组件目录
      1. xxx.vue
   3. App.vue App组件【一个vue文件就是一个组件】
   4. main.ts 项目入口文件
   5. shims-vue.d.ts 类型声明文件
   6. .borwserslistrc
      1. 浏览器支持度说明文件
   7. .eslintrc.js eslint语法规范配置文件
   8. .gitignore git上传代码托管平台的配置文件
   9. babel.config.js 优雅降级配置文件
   10. package.json 项目的记录文件，用于记录
       1. 项目版本
       2. 项目是否私有
       3. 项目装了哪些插件
   11. README.md 项目的说明书
   12. tsconfig.json ts的配置文件
   13. yarn.lock 项目中插件的版本锁定文件

node_modules的安装和删除

1. 安装: yarn
2. 删除: rm -rf node_modules

阅读项目

main.ts

1
2
3
4
5

// main.ts
import { createApp } from 'vue' // 采用 es6模块化
import App from './App.vue'

createApp(App).mount('#app')

1. es6 导出
   1. export default xxx 默认导出一个
   2. export xxx 批量导出，可以导出多个
2. es6 导入
   1. import xxx from ‘xxx’ 默认导入
   2. 批量导入
      1. import {} from ‘xxx’
      2. import * as feom ‘xxx’
      3. import { obj as o } from ‘xxx’ // as 表示别名

APP.Vue

1. .Vue结尾的文件，称为SFC(单文件组件)
2. SFC构成(?表示可有可无)
   1. template
      1. jsx
   2. script?
      1. 组件是通过defineComponent(options)
      2. options就是之前的组件用法
   3. style?
      1. css预处理器: stylus/less/sass
      2. 两个属性
         1. lang 表示选择哪个css语法
         2. scoped
            1. 有 局部样式【只在当前组件生效】
            2. 无 全局样式

vue.config.js

1. vue.config.js 是项目的配置文件(建立在根目录下)
2. 可以配置: 跨域，路径别名，服务器配置，项目优化型的配置
3. vue.config.js中实质上书写的是webpack
4. webpack底层使用Node.js实现的
5. Node.js 的模块化: Common.js
6. 每次修改项目配置文件，项目需要重启才能生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// vue.config.js
module.exports = {
    lintOnsave: false,
    devServer: {
        overlay: { // eslint 关闭
            warnings: false,
            errors: false
        },
        port: 9000, // 服务器端口修改
        proxy: { // 反向代理
            // 标识符: 反向代理的配置选项
            // 标识符我们选择接口中统一存在的路径，一般基本上都是域名后的第一个路径
            // 例如请求https://m.maoyan.com/ajax/movieOnInfoList 
            '/ajax': {
                target: 'https://m.maoyan.com', // 目标源
                changeOrigin: true, // 使用我们的源
            }
        }
    }
}