1、安装node
node下载地址:http://nodejs.cn/download/
node安装完成后会自带npm,vue-cli通过npm安装
安装完成后输入 node -v 查看node版本
查看npm版本,输入npm-v
2、安装vue-cli
全局安装vue
npm install vue-cli -g
安装完成输入vue -V查看版本(这里V大写)
3、vue-cli使用
vue初始化一个项目使用init命令
:inti
vue init template-name project-name
template-name是vue使用的模板官方提供的以下五种:
- webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
- webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
- browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
- browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
- simple-一个最简单的单页应用模板。
project-name项目名称
实际开发中使用webpack
vue init webpack vueProject
打开cmd输入命令会提示输入几个信息
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vue
- 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。
到此等待安装完成
安装完成进入项目目录输入npm run dev运行服务器打开http://localhost:8080
4、项目目录
简单说下项目目录
package.json文件:
package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息(如项目名称、版本、描述、作者等)。
- script字段是用来指定npm相关命令的缩写。
- dependencies字段指项目运行时所依赖的模块,devDependencies字段指定了项目开发时所依赖的模块(在命令行中运行npm install命令,会自动安装dependencies和devDempendencies字段中的模块)
webpack.base.confg.js文件
webpack的基础配置文件
module.export = {
// 编译入口文件
entry: {},
// 编译输出路径
output: {},
// 一些解决方案配置
resolve: {},
resolveLoader: {},
module: {
// 各种不同类型文件加载器配置
loaders: {
...