Vue项目的搭建

Vue的项目搭建

本文主要介绍使用Vue进项项目实践时搭建项目的方法与技巧。

使用 Vue CLI 搭建项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。通过 Vue CLI我们能够快速创建一个新的基于Vue的项目。

在使用Vue CLI创建项目时，我们还需要先安装 node、npm（yarn）、webpack。

1. 安装 Vue CLI：

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   

2. 创建项目

   vue create my-project
   

   这里的项目名不能够使用大写字母。

   运行这行代码后会需要进行特性的配置，可以使用CLI提供的默认的配置preset，也可以手动进行配置。当然这个preset也是可以配置的。不同的项目需要不同的配置，不能盲目套用某一套配置。

3. 目录说明

   完成项目的创建后，根据我们配置的不同会出现不同的文件或者文件夹。部分文件及目录的作用如下：

   |-- dist                       # 打包后文件夹	        
   |-- public                     # 静态文件夹         		                  
   |   |-- favicon.ico				
   |   |-- index.html					#入口页面
   |-- src                        # 源码目录         
   |   |--assets						# 模块资源
   |   |--components					# vue公共组件
   |   |--views 						
   |   |--App.vue                                          # 页面入口文件
   |   |--main.js	                                        # 入口文件，加载公共组件
   |   |--router.js                                        # 路由配置
   |   |--store.js	                                        # 状态管理
   |-- .env.pre-release          # 预发布环境    
   |-- .env.production	      # 生产环境       
   |-- .env.test		      # 测试环境  
   |-- vue.config.js             # 配置文件 
   |-- .eslintrc.js    		  	# ES-lint校验                   
   |-- .gitignore          		# git忽略项 
   |-- babel.config.js   			# babel配置                       
   |-- package.json       	     # 项目基本信息 
   |-- postcss.config.js   	 	# CSS预处理器(此处默认启用autoprefixer)  
   

   

4. 关于Vue项目的小优化

   成功完成上面的步骤后，一个基于Vue的项目就已经基本创建完成了。但是我们还能实现一些小的优化让开发过程更加的方便。

   1. 在开发工具中添加vue snippets，可以很方便地补充vue的代码。

   2. import alias

      • 使用import alias可以简化相对路径的计算。alias就已经指定了一个参照目录一般是 src目录。

      • TS/JS中可以通过 @ ，如： import xxx from '@/文件路径'，来引入文件。

      • CSS/SASS中可以通过 ~@ ，如：@import '~@/文件路径'，来引入文件。

      • 在WebStorm中使用 import alias 需要进行配置(VSCode不需要配置)：

        

        在搜索中搜索webpack，并添加配置文件为项目中的 node_modules\@vue\cli-service\webpack.config.js。否则在使用 alias 时会出现红波浪线的提示。

   3. WebStorm的快速创建文件模板

      webpack中搜索 File and Code Template，那么在创建对应格式文件时就会自动使用我们预先设置好的模板。