Vue项目搭建一

前言

本文主要讲解vue项目的基础的构建与实战，不会太多涉及其API和语法部分。

vue的项目分类

首先，在构建一个vue项目之前我们需要了解vue项目的分类，这里我主要将其分为两类：
1）直接引入vue.js文件（相当于页面中直接引入jquery一样，不过这样的项目只能使用一些基础的API和局限的功能，一般主要用于初级用户和小型项目） 2）使用vue单文件组件

构建方式

构建一个vue项目有很多方式，首先我们需要用到相应的构建工具。官方推荐的构建工具主要有webpack和browserify，这里我更推荐大家使用webpack进行构建。同时除了构建工具，我们还需要用到构建方法，比如我们可以使用vue-cli脚手架来自动生成vue项目的基础目录文件，当然我们也可以从零开始进行自定义构建。可以使用npm命令安装也可以使用cnpm安装，这里推荐大家使用淘宝镜像cnpm代替npm安装，因为npm的服务器在国外，cnpm的服务器在国内，下载速度相对来说要快很多
在控制台中输入如下指令，以后即可使用cnpm代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli构建

如果你使用vue-cli脚手架来构建vue项目，那么你可以选择下面两种中的一种命令即可生成一个简单的vue项目（前提安装node.js）这里使用的是脚手架 3 的版本 — webpack4：

cnpm install -g @vue/cli	----	安装脚手架
vue create myapp / vue ui	----	创建项目（myapp为项目名称，可根据个人需求命名 / vue create myapp为控制台命令安装， vue ui为可视化安装）	

以上创建项目使用的 脚手架 3 的版本 ---- webpack 4

如果想要使用2的版本 ---- webpack

npm install -g @vue/cli-init
vue init webpack myapp2

自定义构建

相比vue-cli构建，自定义构建就显得灵活得多，但是它需要你了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步，本文使用的是控制台命令构建：

文件/文件夹创建
package.json文件创建
webpack配置文件创建
入口文件创建
vue组件编写
路由配置

1.文件/文件夹创建
当你输完 vue create myapp 后会出现以下配置（预设）信息

1）
Vue CLI v3.11.0						//脚手架版本
? Please pick a preset:			    //请选择一个预设
  default (babel, eslint)			//默认选项
> Manually select features		//自定义选项（我们选择自定义选项，选择好后按enter键进入下一步）

2）
Vue CLI v3.11.0
? Please pick a preset: Manually select features	//第一个预设
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)	//检查项目所需的功能
>(*) Babel								//引入babel插件，将es6转成es5
 ( ) TypeScript							//ts脚本语言 js（JavaScript）的升级版，需要就按空格键选择
 ( ) Progressive Web App (PWA) Support	//渐进式Web应用程序（PWA）支持
 ( ) Router								//路由管理器
 ( ) Vuex								//状态管理
 ( ) CSS Pre-processors					//CSS样式预处理
 (*) Linter / Formatter					//自动化代码格式化检测
 ( ) Unit Testing						//测试方式
 ( ) E2E Testing						//测试方式
 
这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步
 
3）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)		//是否记录路由使用的历史记录（对路由器使用历史记录模式）

4）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)				//选择一个CSS预处理器
	Sass/SCSS (with dart-sass)
 > Sass/SCSS (with node-sass)
	Less
	Stylus
这一步之是询问你安装哪一种 CSS 预处理语言，你随意选择，我是一直用的node - sass

5）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
  ESLint with error prevention only		//仅错误预防
  ESLint + Airbnb config				//Airbnb配置
> ESLint + Standard config				//标准配置
  ESLint + Prettier
  上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的
  ESLint + Standard config插件，我使用的是这一个
  
6）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save							//保存时检查
 ( ) Lint and fix on commit (requires Git)	//提交时检查
 这里第一个选项是问你是否保存刚才的配置，选择确定后你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了

7）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)		//选择单元测试方案
> Mocha + Chai		//只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成
  Jest
上面这个是问你选择哪个选择单元测试方案，Mocha + Chai，我使用的是这一个

8）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: (Use arrow keys)		//端对端测试（用户界面测试）
> Cypress (Chrome only)				//e2e测试工具
  Nightwatch (Selenium-based)		//e2e测试工具（中文名‘守夜者’）
  上面这个是问你选择哪个e2e测试工具，Cypress (Chrome only)	，我使用的是这一个

9）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files			//放独立文件放置
> In package.json					//放package.json里
上边这俩意思是，babel,postcss,eslint,etc这些配置文件你想存放在哪？
第一个是：放独立文件放置
第二个是：放package.json里
我选择的是第二个（可根据个人需求选择）

10）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)
上边问你是否将以上这些将此保存为未来项目的预配置吗？这个可以根据个人需求选择，按enter开始安装预设信息。

以上安装完成后如此一个基础的vue项目目录就自动会展现在你面前，我们可以来看一下其自动生成的项目目录结构：

 node_modules    		// 项目需要使用的依赖文件
 public 			    // 静态资源文件
 src   				    // 我们的主场
 tests					// 测试
.browserslistrc		    // 浏览器版本的设置   使用最新的版本
.editorconfig 			// 编辑器的设置
.eslintrc.js			// 代码格式校验
.gitignore 				// git的忽略文件
babel.config.js			// babel配置文件
cypress.json			// 测试的插件配置
package.json  			// 项目的一个描述的文件
postcss.config.js 		// css的配置
README.md				//项目描述文件

src目录结构

src
assets						 // 静态资源的文件
components 					 // 项目中需要的组件
views 						 // 应用中的页面 （路由找页面，页面找组件）
App.vue 					 // 总页面
main.js 					 // 入口逻辑文件 --- 视图绑定到元素上
registerServiceWorker.js	 // 上线执行的一个文件
router.js 					 // 路由
store.js				     // 状态管理器

增加运行命令

修改package.json文件里面的内容（此内容可修改可不改）
"scripts": {
    "serve": "vue-cli-service serve",
    **"dev": "cnpm run serve",**
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
},
不修改可以使用 cnpm/npm run serve 运行项目
修改后可以使用cnpm/npm run dev运行项目

在Vue-CLI v3中入口文件已经配置好了，我们可以直接去使用。入口文件的主要功能为挂载生成的vue实例app至id为app的DOM节点上：

import Vue from 'vue' // export default ajax
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app') 

vue组件编写
我们需要编写一个最简单的vue组件index.vue，将其放在views文件夹下

<template>
    <div>hello world!</div>
</template>
 
<script>
 // 单文件组件     .vue为后缀   至少得有一个template
 	export default { // 暴露该组件（要写js）， 如果不写script，会默认暴露出去
	}
</script>
 
<style>
  //可以在此处写样式或者导入样式库文件
</style>

同时我们需要编写最外层父组件App.vue，一般像下面这样，主要嵌套一层router-view来动态展示不同路由下的内容:

<template>
    <router-view></router-view>
</template>
 
<script>
 	
</script>

 <style>
  
</style>

路由配置
在编写完我们vue的单文件组件后，我们需要配置我们的路由文件，以便实现一个单页应用：

import Vue from 'vue'					 // 引入vue
import Router from 'vue-router' 		 // 引入路由
 
Vue.use(Router) 						 // 注册路由
 
import Index from '../views/index.vue'   // 引入我们刚刚编写的简单的组件
 
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('@/views/index.vue') // 使用路由懒加载可以优化性能,当需要的时候就加载，不需要就不加载
        },
        { 
            path: '*', 
            redirect: '/' 				 // 路由的重定向
        }, 
    ]
})