vue环境搭建

VUE 环境搭建

1.安装node

• node下载官网

2.vue CLi3 安装

• 你可以使用下面所列出的任意一行命令来安装 @vue/cli。

npm install -g @vue/cli
// 或者是
yarn global add @vue/cli

//卸载
npm uninstall -g @vue/cli

• 完成安装之后，你就可以在命令行中运行 vue，命令行中将会出现帮助信息。你还可以使用下面的命令来检查 Vue CLI 的版本。

vue --version
// 或者是
vue -V

创建一个新的项目

• 你可以运行下面的命令来创建一个新的项目。

vue create 项目名称

文件目录结构

|-- publi // 公共目录
|    |-- favicon.ico // icon 图标
|    |-- index.html // 访问页面
|-- src // 源码目录
|    |-- assets // 静态资源目录
|    |-- components // 组件目录
|    |-- views // 视图目录
|    |-- App.vue // 页面入口文件
|    |-- main.js // 程序入口文件
|    |-- router.js // 路由文件
|    |-- store.js // 状态管理文件
|-- .browserslistrc // 浏览器兼容文件
|-- .eslintrc.js // 定义eslint的plugins，extends，rules
|-- .gitignore // git上传需要忽略的文件格式
|-- babel.config.js // ES6语法编译配置
|-- package.json // 项目基本信息，包依赖信息等
|-- postcss.config.js // postcss配置文件
|-- README.md // 项目说明

vuecli2 搭建

	npm install vue-cli -g
	

创建项目

	vue init webpack vuecliTest
	

创建项目说明

	Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
 	Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
	Author：作者，如果你有配置git的作者，他会读取。
	Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
	Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这	里不需要输入n，如果你是大型团队开发，最好是进行配置。
setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。