Vue CLI 3搭建vue+vuex最全分析(推荐)(4)

webstorm打开项目(个人习惯,你也可以搭建完直接顺势运行),运行后webstorm自动生成了个.idea文件(用来存放项目的配置信息,如:括版本控制信息、历史记录等)

Vue CLI 3搭建vue+vuex最全分析(推荐)

(4)查看运行结果:

打开浏览器,输入运行结果提示的地址(上上图红框),enter

Vue CLI 3搭建vue+vuex最全分析(推荐)

(5)拉取 2.x 模板 (旧版本):

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

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

(6)在现有的项目中安装插件(vue add 命令),eg:

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

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

vue add @vue/eslint //如果不带 @vue 前缀,该命令会换作解析一个 unscoped 的包,你也可以基于一个指定的 scope 使用(eg:vue add @foo/bar)

2、vue ui 图形化界面创建项目

vue ui

命令行输入命令,操作如下:

Vue CLI 3搭建vue+vuex最全分析(推荐)

然后会自动打浏览器页面,选择创建如下:

Vue CLI 3搭建vue+vuex最全分析(推荐)

Vue CLI 3搭建vue+vuex最全分析(推荐)

Vue CLI 3搭建vue+vuex最全分析(推荐)

结果如下:

页面提示正在安装依赖:

Vue CLI 3搭建vue+vuex最全分析(推荐)

本地已经有项目包了:

Vue CLI 3搭建vue+vuex最全分析(推荐)

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

Vue CLI 3搭建vue+vuex最全分析(推荐)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/96a290cb7527f65ef5452e3ebfd4292c.html