搭建一个Vue项目

目录 一、安装node环境1、下载node2、检查是否安装成功3、为了提高我们的效率，可以使用中国镜像站（原淘宝镜像） 二、搭建vue环境1、全局安装vue-cli2、进入项目目录，创建一个基于 webpack 模板的新项目3、进入项目目录，运行项目 三、vue项目目录详解1、build 构建脚本目录2、config构建配置目录3、src资源目录4、其他文件 四、常用快捷键

一、安装node环境 1、下载node

https://nodejs.org/en/

2、检查是否安装成功

node -v
npm -v

3、为了提高我们的效率，可以使用中国镜像站（原淘宝镜像）

https://registry.npmmirror.com

npm install cnpm -g --registry=https://registry.npmmirror.com

查看版本，检查是否安装成功，安装成功后，需要使用npm的就可以用cnpm代替了

二、搭建vue环境 1、全局安装vue-cli

npm install --global vue-cli

查看是否安装成功，检查vue版本

vue --version
vue -V
vue list

2、进入项目目录，创建一个基于 webpack 模板的新项目

vue init webpack 项目名

/	说明	*** 作
Vue build	打包方式	回车
Install vue-router	是否需要安装Vue-router,项目中需要	输入Y后回车
Use ESLint to lint your code	是否需要JS语法检查，暂时不需要	输入n后回车
Set up unit tests	是否安装单元测试工具，暂时不需要	输入n后回车
Set e2e tests with Nightwatch	是否需要端到端测试工具，暂时不需要	输入n后回车

3、进入项目目录，运行项目

cd vue-test   进入项目目录
npm install   安装依赖
npm run dev   运行项目

访问测试，如下则安装成功

利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构

三、vue项目目录详解

文件夹名	作用
build	构建脚本目录
config	构建配置目录
node_modules	依赖的node工具包目录
src	源码目录
static	静态文件目录
test	测试文件目录

1、build 构建脚本目录

文件名	作用
build.js	生产环境构建脚本
check.version.js	检查npm、node.js脚本
utils.js	构建相关工具方法
vue-loader.conf.js	配置了CSS加载器以及编译CSS之后紫铜添加前缀
webpack.base.conf.js	webpack基本配置
webpack.dev.conf.js	webpack开发环境配置
webpack.prod.conf.js	webpack生产环境配置

2、config构建配置目录

文件名	作用
dev.env.js	开发环境变量
index.js	项目配置文件
prod.env.js	生产环境变量

3、src资源目录

文件夹名	作用
assets	资源目录，放置一些图片或者公共JS、公共CSS。这里的资源会被webpack构建
components	组件目录，我们写的组件就放在这个目录
router	前端路由，我们需要配置的路由路径写在index.js里面

4、其他文件

文件名	作用
App.vue	页面级vue组件
main.js	入口js文件
index.html	首页入口文件，可以添加一些meta信息等
package.json	npm包配置文件，定义了项目的npm脚本，依赖包等信息
README.md	项目的说明文档，Markdown格式
.xxx	这是一些配置文件，包括语法配置，git配置等

四、常用快捷键

*** 作	指令
打开cmd	win + r
终止运行	crtl + c
返回上一级	cd …
切换E盘	e:
访问文件	cd + 文件名