vue cli脚手架搭建

1、什么是vue­cli

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

2、全局安装vue­cli

前期准备
下载node安装包,傻瓜式安装(下一步,下一步……)
https://nodejs.org/en/
http://nodejs.cn/download

1. 检查npm 版本，建议安装到最新版本。
   【命令行查看版本号】
   node ­v
   npm ­v
   【升级npm（可选操作）】npm install ­g npm
   【修改为淘宝镜像（可选操作）】
   npm config set registry “https://registry.npm.taobao.org”

2. 安装
   【全局安装 webpack】
   npm install webpack ­g
   【webpack 4.X 开始，需要安装 webpack­cli 依赖】
   npm install webpack webpack­cli ­g
   【查看版本号】
   webpack ­V
   【全局安装vue­cli】2.0版本
   npm install ­g vue­cli
   【查看版本号】
   vue ­V
   【输入vue 输出以下为安装成功】
   

注：若出现“Unexpected end of JSON input while parsing near”错误，命令行输入： npm cache clean ­­force

3. 创建项目（命令行方式）
   （1）创建一个文件保存的路径。比如：E:\vue\vue­demo
   【命令行进入该目录】
   cd E:\vue\vue­demo
   【下载模板】
   vue init webpack vue­demo 【vue­demo项目名字】
   【进入交互页面，根据自己情况选择】
   ?Project name vue­demo # 项目名称，直接回车，按照括号中默认名字
   （注意这里的名字不能有大写字母，如果有会报错Sorry, name can nolonger contain capital letters）。
   ? Project description A Vue.js project # 项目描述,随便写
   ? Author # 作者名称
   ? Vue build standalone # 我选择的运行加编译时
   Runtime + Compiler: recommended for most users[推荐]
   ? Install vue­router? Yes # 是否需要 vue­router
   ? Use ESLint to lint your code? 选择No # 是否使用 ESLint 作为代码规范. 对ES代码 有限制 link­限制 如果选择了YES则会有下选项
   ? Pick an ESLint preset Standard # 一样的ESlint 相关
   ? Set up unit tests Yes # 是否安装单元测试 选择No
   ? Pick a test runner 按需选择 # 测试模块
   ? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试选择No
   ? Should we run npm install for you after the project has been
   created? (recommended) npm # 包管理器，选NPM
   安装成功后，进入项目目录
   【命令行进入该目录】
   cd E:\vue\vue­demo
   【初始化项目】
   npm install //node_modules
   【启动项目，根据package.json中的数据来启动】
   npm run serve / npm run dev
   【关闭项目】
   Ctrl + C
   【浏览器访问：】
   http://localhost:8080/
   【项目打包上线】
   npm run build
   将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可（比如tomcat的webapps目录下）。