vue/clii安装踩坑

2019-12-12

字数统计: 596字 | 阅读时长: 2分

总阅读量次

Vue脚手架搭建

1 Vue简介

现在Vue作为最火的前端开发框架，具有入门快，效率高等特点，广受互联网公司的喜爱，纷纷使用和推荐Vue框架来做前端的开发与设计

2 安装vue/cli脚手架

1	$ npm install @vue/cli -g

如果全局安装过旧版本的vue-cli（1.x或者2.x)需要先卸载旧版的vue-cli(Vue3与旧版本不兼容)

1 2	$ npm uninstall vue-cli -g //或者yarn global remove vue-cli

vue-cli

可以看到我之前的版本是2.9.6，卸载成功后，vue命令便不存在了

另外，Vue-Cli 3 需要nodejs的版本>=8.9

1	$ node -v(查看node版本信息)

node

3.安装@vue/cli

1 2	$ cnpm install -g @vue/cli //或者yarn global add @vue/cli

@vue/cli

4.查看Vue版本

vue

5使用Vue新建项目

1 2	$ vue create my-pro //文件名不支持驼峰（含大写字母）

默认选项后，成功新建项目demo

1 2	$ cd my-pro $ npm run serve

run

6 查看运行结果

8080

7 踩坑实例

有时会安装@vue/cli出现错误，使用

1
2
3

$ npm i npm -g (更新npm版本)
$ npm i cnpm --registry=https://registry.npm.taobao.org
$ cnpm i -g @vue/cli

使用以上命令更新镜像源，使用淘宝镜像源来安装下载（国内）

8 拉取2.x模板

Vue CLI 3 覆盖了旧版本的`vue` 命令，如果需要使用旧版本的 `vue init` 功能，可以全局安装一个桥接工具：

1 2	$ npm install -g @vue/cli-init //`vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 $ vue init webpack my-project

9 安装插件

官方提示：`vue add` 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器！

官方警告：我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

1 2	$ vue add @vue/eslint //如果不带 @vue 前缀，该命令会换作解析一个 unscoped 的包，你也可以基于一个指定的 scope 使用（eg：vue add @foo/bar）

10 图形化界面

$ vue ui

安装完成：你可以在这管理（安装、删除）插件、运行并分析你的项目文件

1	文章来源：https://my.oschina.net/wangnian/blog/2051369