首页 > 其他分享> 文章详细

使用vue-cli2创建模板项目

2022-01-03 22:29:59 阅读：166 来源： 互联网

标签：npm vue cli2 cli webpack install 安装模板

1、什么是vue-cli

2、全局安装vue-cli

3、创建项目（命令行方式）

4、创建项目（图形界面方式）

一、vue-cli2

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”

npm install -g cnpm –
registry=https://registry.npm.taobao.org

检验是否成功 npm config get registry

（2）安装
【全局安装 webpack】

npm install webpack -g

【webpack 4.X 开始，需要安装 webpack-cli 依赖】

npm install webpack webpack-cli --g

卸载[全局]webpack

npm uninstall -g webpack-cli

 vue-cli2.x

【查看版本号】

webpack -V

【全局安装vue-cli】2.x版本

npm install -g vue-cli

【查看版本号】

vue -V

注：
　　若出现“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 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? 选择No # 是否使用 ESLint 作为代码规范. 对ES代码有限制 link-限制如果选择了YES则会有下选项

? Pick an ESLint preset Standard # 一样的ESlint 相关

? Set up unit tests Yes # 是否安装单元测试选择No

? Pick a test runner 按需选择 # 测试模块选择No

? 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 dev

关闭项目】
Ctrl + C
浏览器访问：

http://localhost:8080/

标签：npm,vue,cli2,cli,webpack,install,安装,模板
来源： https://blog.csdn.net/ikEason_/article/details/122293860