Vue-CLI环境配置

一、Vue-CLI 介绍

CLI 是 Command-line Interface 的缩写，俗称脚手架，用来快速搭建 Vue 开发环境以及对应的 webpack 配置。

二、环境搭建

2.1 安装 node

2.1.1 windows 系统

1. 前往 官网 下载对应版本。
2. 默认安装
3. 打开 cmd 输入 node -v ，检查 node 环境是否安装成功

node -v
v14.15.1

4. 输入 npm -v，检查 npm 环境是否安装成功

npm -v
6.14.8

2.1.2 mac 系统

1. 安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2）安装 nodejs

brew install nodejs

---

2.2 安装淘宝镜像

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

---

2.3 安装打包工具 webpack

cnpm install webpack -g

---

2.4 安装脚手架 vue-cli

该命令安装 vue-cli3 版本

npm install -g @vue/cli

查看可创建的模板：

vue list

Available official templates:
  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

三、创建项目

注：也可以通过 vue ui 进入可视化创建项目

3.1 进入项目存放目录

cd project/vue

3.2 通过脚手架创建项目

vue create hello_vue

项目创建过程中需要填写一些选项：

# 请选择一个预设：（使用箭头键）
please pick a preset :(use arrow keys)
	# 默认配置，支持babel eslint
	default (vue 2 babel eslint)
    # 默认配置，vue3 版本
	default vue3 preview
	# 自定义配置    
	manually select features

这里我们选 default (vue 2 babel eslint)

3.3 进入目录并运行

cd hello_vue
npm run serve   

3.4 项目结构说明

# 生成打包后的文件
|--dist 
# 安装的依赖包    
|--node_modules     
# 静态资源，会被复制到 dist 目录
|--public  
# 源码目录    
|--src
    # 与后端交互使用的相关方法和配置
    |--api
    # 放置一些静态资源，例如图片等
    |--assets
    # 公共组件
    |--components 
    # 路由相关配置
    |--router
    	|--index.js 路由配置
    # store (全局状态)相关配置
	|--store
    	# 全局 vuex 配置
    	|--global 
    		# 全局 vuex actions 方法 
    		|--actions.js 
    		# 全局vuex 配置
    		|--index.js 
    		# 全局 vuex mutations 方法
    		|--mutations.js 
    		# 全局 vuex state
    		|-- state.js 
    	# 模块化 vuex
    	|--modules 
    		# 将 modules 下的所有模块导出
    		|--index.js 
    		# about 对应模块
    		|-- about.js
    	# vuex 入口配置
    	|-- index.js
    # 所有路由组件
    |--views
    # 路由组件的顶层路由
    |--App.vue
    # vue 入口文件
    |-main.js
    # 封装的工具函数，例如时间格式化等
    |--utils.js
# 本地启动项目运行环境配置 文件   
|--env.loacal
# 打测试包环境变量配置文件
|--env.test 
# 打生产包环境变量配置文件
|--env.production 
# 配置不提交到 git 仓库的文件
|--.gitignore
# babel语法编译配置文件
|--babel.config
# vue 配置文件
|--vue.config.js  
# 项目基本信息
|--package.json 
# 锁定安装时的包的版本号    
|--package-lock.json 
# 项目说明
|--README.md