vue3项目的创建和配置文件

C.&H.

6498人浏览 · 2022-07-02 08:10:28

C.&H. · 2022-07-02 08:10:28 发布

一、手动创建vue3项目

（1）创建名为vue_pointcloud的vue3项目，并选择手动设置Manually...

vue create vue_pointcloud

（2）选择手动创建项目

（3）选择项目所需要的功能

(*) Babel                                 // 支持高阶语法转换。可以将ES6代码转为ES5代码。

( ) TypeScript                            // 支持用TypeScript写源码。包含并扩展了JS的语法，需要被编译输出为JS在浏览器运行。

( ) Progressive Web App (PWA) Support     // 支持PWA。渐进式Web应用程序。

(*) Router                                // vue路由

(*) Vuex                                  // vue的状态管理模式

(*) CSS Pre-processors                    // CSS 预处理器（如：less、sass）

(*) Linter / Formatter                    // 代码风格检查和格式化（如：ESlint）

( ) Unit Testing                          // 支持单元测试

( ) E2E Testing                           // 支持E2E（end to end）测试

（4）选择项目的版本（vue2或vue3）

（5）是否用history模式来创建路由

hash模式和history模式的不同

最直观的区别就是在url中hash带了一个很丑的 # ，而history是没有#的

（6）css预处理器，这里选择第一个Sass/SCSS

1）Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
2）LESS 最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
3）Stylus 主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

（7）语法检测工具。此处选择了ESLint with error prevention only 仅错误预防

ESLint with error prevention only 仅错误预防

ESLint + Airbnb config Airbnb配置

ESLint + Standard config 标准配置

ESLint + Prettier 该配置应该比较完善

（8）语法检查方式。此处选择了：保存就检测Lint on save

（9）配置文件放哪。选择In dedicated config files

  In dedicated config files // 独立文件放置
  In package.json // 放package.json里

（10）是否将此保存为将来项目的预设。这里选择No,然后项目开始创建。

如果预设的话，起个名字，下次创建项目可以使用该模板直接创建，不用再次选择。

（11）项目创建成功。

至此，项目创建完成！

通过 npm run serve 开启热更进行开发调试；通过 npm run build 构建打包上线。

在项目目录下执行npm run serve,运行项目；
通过http://localhost:8080/访问。

二、配置文件解析

（1）node_modules：所有的项目依赖包都放在这个目录下（通过 npm install 下载的包）。

（2）public：存放静态资源公共资源，不会被压缩合并。

index.html: 项目入口的html文件。

（3）src：源文件目录，编写的代码基本都在这个目录下。

assets：放置静态文件，比如图片；
components：存放vue组件；
router：路由的配置文件，实现页面跳转；
store：存放 vuex为vue专门开发的状态管理器；
views：视图文件（界面组件）；
App.vue：根组件；
main.js：入口文件；

（4）.eslintrc.js：配置eslint语法规则。

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

（5）.gitignore：用来配置那些不归git管理的文件。

（6）babel.config.js：Babel的配置文件，作用于整个项目。

Babel是一个JS 编译器，主要作用是将ECMAScript 2015+版本的代码,转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其它环境中。
Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel, 将ES6转换为ES5。

（7）jsconfig.json：指定根目录和JavaScript服务提供的功能选项。

Visual Studio Code的JavaScript支持可以两种不同模式运行：

File Scope : 没有jsconfig.json。在这种模式下，在Visual Studio Code中打开的JavaScript文件被视为独立的单元。只要文件a.js没有显式引用b.ts（即使用import或CommonJS 模块），两个文件之间就不会存在公共项目上下文。
Explicit Project: 有jsconfig.json。通过jsconfig.json文件定义一个JavaScript项目。目录中是否存在此类文件表示该目录是JavaScript项目的根目录。文件本身可以选择列出属于项目的文件，要从项目中排除的文件以及编译器选项。

（8）package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

（9）package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

（10）README.md：项目的说明文件。

（11）vue.config.js：对vue文件进行配置。

（12）webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

三、主要文件的详细解释

（1）router文件

位置：src目录下的router目录下的index.js文件

使用：vue-router路由文档详解_donglianyou的博客-CSDN博客_vue-router文档

（2）App.vue根组件、main.js入口文件、index.html项目入口的html文件

index.html是页面的入口文件，里面包含一个id为app挂载点

App.vue是根组件，所有页面都是在App.vue下进行切换。

所有的组件都是它的子组件。在根组件中再使用router-view组件，路由中匹配到的所有的组件都会通过它进行渲染。

在路由配置中（如下图所示），path为 “/” 的组件，自动加载到App.vue的路由占位符位置。

main.js是vue-cli中js的入口文件（所有JS几乎都会通过它来引入），主要作用是初始化vue实例，并引入所需插件；

createApp中将App组件作为参数，通过render函数处理后再返回节点；
再通过mount挂载到index.html中“id=app”的div中。

vue-cli3内部高度集成了webpack，vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。
vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

（3）package.json：命令配置和包管理文件

package.json定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）；
创建项目时会自动生成package.json文件（package.json文件可以手工编写，也可以使用npm init命令自动生成。）。
npm install 命令根据package.json配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境【直接转到项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下】。可以通过修改package.json文件内的内容，再通过npm install进行更新。
package.json中不能添加中文注释，否则会出现编译错误

字段说明：

最简单的package.json文件，name即项目名，version即项目版本

{
  "name": "kodeblog",
  "version": "0.1.0",
}

scripts

指定了运行脚本命令的npm命令行缩写。
如下列设置中指定了npm run serve所要执行的命令为vue-cli-service serve【即npm run + 缩写】

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

package.json中scripts字段演示

dependencies，devDependencies

dependencies — 指定了项目运行所依赖的模块
devDependencies — 指定了项目开发所需要的模块

它们都指向一个对象，该对象的各个成员，分别由模块名和对应的版本要去组成，表示依赖的模块及其版本范围。

save参数表示将该模块写入dependencies属性
save-dev表示将该模块写入devDependencies属性

	//dependencies --- 项目的依赖,类似于后端的pom.xml,在此处的依赖
	//选择  "build": "vue-cli-service build --mode prod"
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {//devDependencies设定的是开发使用的依赖 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

config字段 :用于向环境变量输出值

{  
	"name" : "foo",  
	"config" : { "port" : "8080" },  
	"scripts" : { "start" : "node server.js" }  
}

engines 字段：指明了该项目所需要的node.js版本

"engines": {
	"node": ">= 4.0.0",
	"npm": ">= 3.0.0"
},

（4）vue.config.js：对vue文件进行配置（如：跨域proxy代理）

用脚手架最重要的一个配置文件就是 vue.config.js 了，可以拷贝之前项目下的这个文件过来，就立即可以用。

由于vue-cli 3 学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
但是有些内容需要进行相关的配置，所以我们还是要创建一个vue.config.js来进行数据修改，比如代理啥的。

配置详解：

最基本的配置

publicPath：项目部署的基础路径

首先是 publicPath 
		{
			Type(类型): string
			Default(默认): '/'
		}
  1.项目部署的基础路径
  2.我们默认假设你的应用将会部署在域名的根部，
  3.比如 https://www.my-app.com/
  4.如果你的应用时部署在一个子路径下，那么你需要在这里
    指定子路径。比如，如果你的应用部署在
    https://www.foobar.com/my-app/
    那么将这个值改为 `/my-app/`

拓展：把开发服务器假设在根路径，可以直接使用一个判断
    publicPath :process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'

outputDir：定义构建好的文件输出到哪里

outputDir (基本不动，打包目录不都是用那个吗)
		{
			Type(类型): string
			Default(默认): 'dist'
		}
1.将构建好的文件输出到哪里（或者说将编译的文件），当运行 vue-cli-service build 时
生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

assetsDir ：放置生成的静态资源的目录

assetsDir (基本上都是默认)
		{
			Type(类型): string
			Default(默认): ''
		}
	1.放置生成的静态资源 (js、css、img、fonts) 的目录。
	注(我没懂)：从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。

indexPath：指定生成的 index.html 的输出路径

indexPath (没动过)
		{
			Type(类型): string
			Default(默认): 'index.html'
		}
	1.指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

代理配置

	如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
	你需要在开发环境下将 API 请求代理到 API 服务器。
	这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
我们前边的 axios 就说了
	  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
          '/api': {
                target: 'http://localhost:8880',
                changeOrigin: true,
                secure: false,
                // ws: true,
                pathRewrite: {
                    '^/api': '/static/mock'   
                    // 请求数据路径别名,这里是注意将static/mock放入public文件夹
                }
          }
   },
   before: app => {}
  },

vue.config.js简介版本的配置：

很多都是默认的，不需要修改

module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

    //基本路径
    publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
        host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
        port: 8080,
        hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
        proxy: {
            '/': {
                target: 'http://xxxx:8080', //目标接口域名
                secure: false, //false为http访问，true为https访问
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/': '/' //重写接口
                }
            }
        }, // 设置代理
        before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

总结（重要）：

vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件、一堆 js文件。如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件。

vue的开发有两种：

一种是直接在script标签里引入vue.js文件即可，个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开webpack。
所以另一种方法也就是基于webpack和vue-cli的工程化开发。

webpack 有个特性，基本的功能都是可以用配置去实现的，所以就造成一个特点“很容易忘记它”，所以就很有必要记录一下。

webpack 分为
	Entry：入口
	Output: 出口
	Module 模块
	Plugin 插件
	DevServer 服务器配置

参考：

Vue vue.config.js 的详解与配置_前端菜鸟-AllenYe的博客-CSDN博客_vueconfig.js

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

MySQL全文索引源码剖析之Insert语句执行过程

华为云开发者联盟

openGauss - 向量化执行引擎 - distinct分组聚合的实现

华为云开发者联盟

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

华为云开发者联盟

所有评论(0)

查看更多评论

C.&H.

@sunnnnh

已为社区贡献2条内容

vue3项目的创建和配置文件

C.&H.

一、手动创建vue3项目

二、配置文件解析

三、主要文件的详细解释

（1）router文件

（2）App.vue根组件、main.js入口文件、index.html项目入口的html文件

（3）package.json：命令配置和包管理文件

（4）vue.config.js：对vue文件进行配置（如：跨域proxy代理）

vue.config.js简介版本的配置：

总结 （重要）：

所有评论(0)

C.&H.

总结（重要）：