vue脚手架的使用以及安装、vue脚手架搭建的项目结构

1.脚手架

代码中，一个网站、app项目也要使用脚手架进行搭建，使用脚手架可以快速搭建一个vue项目。

使用上，脚手架就是一个node.js模块，使用npm下载安装后结合webpack打包工具可快速生成一个vue项目架构。

1.1 vue语法版本 和 vue脚手架 区分

• vue语法版本：1.x 废除；2.x之前的主流，大部分老项目都在用 ；3.x21年上半年正式法不，大半部分新项目在用
• vue脚手架版本：1.x/2.x 以前老的项目使用的版本；3.x/4.x/5.x 目前主流版本

1.2 vue3.x脚本搭建项目步骤

1.2.1 安装 @vue/cli 脚手架

npm install -g @vue/cli

安装完成后，可以使用 vue -V查看版本号

注意：@vue/cli依赖于webpack，在使用之前，先安装webpack

npm install webpack -g

1.2.2 创建项目

vue create project-name

这里的project-name是自定义的项目名称，命令执行之后，会生成对应文件夹

1.2.3 项目生成之后，已经自动安装了相关依赖项，这时候可以直接启动项目

npm run serve

1.2.4 完成上述步骤之后，就已经可以开发vue项目，但无法满足定制化的开发需求

这个时候就需要在项目根目录配置vue.config.js

脚手架3.x/4.x，需要手动创建vue.config.js配置文件，写法如下：

	module.exports = {
  		publicPath:'/',    // 启动页地址
  		outputDir: 'dist', // 打包的目录
 		lintOnSave: true, // 在保存时校验格式
  		productionSourceMap: false, // 生产环境是否生成 SourceMap
  		devServer: {
    			open: true, // 启动服务后是否打开浏览器
    			host: '0.0.0.0',
    			port: 8080, // 服务端口
    			https: false,
    			hotOnly: false,
   			 proxy: null, // 设置代理
    			before: app => {}
  		},
	}

脚手架5.x之后，项目搭建时，vue.config.js会自动创建，写法如下：

	const { defineConfig } = require('@vue/cli-service')
	module.exports = defineConfig({
		transpileDependencies: true,
		publicPath: '/',    // 启动页地址
		outputDir: 'dist', // 打包的目录
		lintOnSave: true, // 在保存时校验格式
		productionSourceMap: false, // 生产环境是否生成 SourceMap
		devServer: {
			open: true, // 自动打开浏览器访问主页
			host: 'localhost',  // 主页地址
			port: 8080,    // 端口号
			proxy: null, // 设置代理
		}
	})

1.2.5 当项目完成时，需要打包发布

• 打包：项目开发完成之后，代码行执行命令，编译并重新构建项目，然后再项目目录下生成一个dist文件夹

npm run build

• 发布：只需要将dist文件夹中的所有内容赋值到服务器( IIS / node / apache)的静态文件夹中即可

2.脚手架搭建的vue项目结构

2.1 单文件组件

在vue项目中，每个组件都单独封装到一个.vue类型文件中，叫做单文件组件。

一个单位文件组件中包括三个标签：

• template，必选，属于组件的模板标签
• router，可选，设置组件中的数据交互和逻辑运算
• style，可选，组件内样式

2.2 样式隔离

样式隔离：style标签添加scoped属性可限制此样式只在当前组件起效，默认不加是全局起效

2.3 路由懒加载组件

在一个单文件组件中导入另一个组件的导入方法处理import form之外还有路由懒加载组件。

懒加载组件：当路由初始化时，不再导入组件，路由将要跳转时再加载组件，提高页面加载效率

component: () =>import ( /* webpackChunkName: "about" */ '../views/LoginView.vue')

2.4文件夹作用

1. public：服务端的静态目录。一般放比较大的资源文件或数据文件，如：mp3、mp4、zip等比较大的文件，前端页面访问时要通过数据请求访问

2. src :前端目录，前端i昂管的代码全部放在src目录中

   • main.js：整个项目的入口文件，项目启动时第一个执行的逻辑文件
   • App.vue：根组件，单文件组件的跟文件

3. router：vue直接配置好的路由，无自己再创建路由

   • $mount() 相当于el属性设置根标签，根标签id为app，在public中的inde.html
   • index.js：路由的配置文件

4. views：放单文件组件，单独的一个完整的页面

5. components：当单文件组件，一个页面中的一些组件

6. assets：前端静态目录，一般放比较小的资源文件，jpg、icon、js前端页面可以直接导入使用。项目打包时，asserts会被打包，public不会被打包