Use vue-cli to create a template project
1. What is vue-cli
It is a scaffolding tool officially provided by vue. The scaffolding tool is simply to automatically configure the environment, dependencies and other information required by the project.
2. Install vue-cli globally
(1) Check the npm version, it is recommended to install to the latest version.
//命令行查看版本号
node -v
npm -v
//升级npm(可选操作)
npm install -g npm
//修改为淘宝镜像(可选操作)
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2) Installation
//全局安装 webpack
npm install webpack -g
//webpack 4.X 开始,需要安装 webpack-cli 依赖
npm install webpack webpack-cli -g
//查看版本号
webpack -v
//全局安装vue-cli
npm install -g vue-cli
//查看版本号
vue -V
Note:
If the error "Unexpected end of JSON input while parsing near" appears, the
command line input: npm cache clean --force
3. Create a project (command line method)
(1) Create a path to save the file. For example: E:\vue\vue-demo
//命令行进入该目录
cd E:\vue\vue-demo
//下载模板
vue init webpack vue-demo
//进入交互页面,根据自己情况选择
?Project name vue-demo -- 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer 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? Yes -- 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard -- 一样的ESlint 相关
? Set up unit tests Yes -- 是否安装单元测试
? Pick a test runner 按需选择 -- 测试模块
? Setup e2e tests with Nightwatch? 安装选择 -- e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm -- 包管理器,我选的NPM
(2) After the installation is successful, enter the project directory
//命令行进入该目录
cd E:\vue\vue-demo
//初始化项目
npm install
//启动项目,根据package.json中的数据来启动
npm run dev
//关闭项目
Ctrl + C
//浏览器访问:
http://localhost:8080/
//项目打包上线
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可(比如tomcat的webapps目录下)。