怎么安装 vue-cli3?
发布网友
发布时间：2022-04-24 14:57
共2个回答
懂视网
时间：2022-05-14 16:05
本篇文章给大家带来的内容是关于vue-cli3.0安装与配置的方法教程（图文），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近公司要开新项目，用vue-cli3.0配置，让我搞一搞，做个记录。
安装
首先你要升级到cli3.0，命令如下。(最好自己去官网过一遍cli3.0的文档)
npm install -g @vue/cli-service-global
安装完成后检测一下是否安装成功，如下图展示。
显示3.0以上就安装成功。
创建一个项目
vue create hello-world
创建过程中，会让你选一系列的配置，键盘上下键可以切换，空格键可以选取，回车键确认。下面我一一细说。
第一个默认配置只会安装babel和eslint，其它的需要自己配置，不建议选，这里我们选择第二个手动配置。按回车（键盘上下键可以上下切换选择）
从上往下分别为（注：空格键可以选定）
babel：用来将es6的代码编译为es5 typescript：javascript的一个超集，我这里没选 Progressive Web App (PWA) Support： pwa技术 Router：路由 Vuex：全局状态管理 CSS Pre-processors： css预处理 Linter / Formatter： 风格检查器 Unit Testing：单元测试 E2E Testing：e2e测试
这里选择可以根据个人需求来进行选择
下一步，选择eslint的风格，这里不多啰嗦，直接选择第三个standard（应为前几个我也不了解-_-）
这里是问你，要在保存时设置lint还是在提交是设置lint，我这里设置保存时lint（第一个）
这里是问你将babel，eslint，postcss这些配置放在那里
In dedicated config files：放在相应的文件中 In package.json：放在package.json中
这里是问你是否保存预设，当你选择是的时候，下次你在执行vue create xxx的时候，会默认选择这些设置，建议选否
走到这一步就配置完成，等待安装完成。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
热心网友
时间：2022-05-14 13:13
安装步骤：
1、cmd打开命令行窗口
2、输入cnpm install vue-cli -g，然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)
3、安装结束后输入vue 如果显示版本号继续下一步操作
4、运行vue init webpack demo(注：项目名称)回车
5、显示Project nanme 目录名 回车 project description 后面可以写上描述，或者直接回车
Author 后面可以写作者也可以回车
6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选Y
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9、Setup e2e tests with Nightwatch? 选n
10、这个时候在你创建的目录下就有你的目录了，然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的，安装完成后会在项目文件夹下自动生成node-mole文件来存放安装的依赖文件，如果这个文件夹没有那么项目是没办法跑
起来的
11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用，启动成功它会自动打开一个vue页面
12、每次这样启动是很麻烦的，用开发工具加载整个项目，里面有个package.json，它我整个项目的配置和信息的描述，里面有个scripts,这是定义的一些脚本，刚才用的就是里面的dev，它会执行后面的东西，就是用node跑一个JSON文件
13、在项目中，右击package.json选择show npm scripts,显示npm后，双击命令即可
main.js的介绍
el是挂载点，router是路由
