vue-cli V3.0版本的使用详解

vue-cli 3.0版本

目前官网上还不是3.0版本，所以需要在github上面学习使用：

github网站：https://github.com/vuejs/vue-cli/tree/dev/docs

1、项目搭建

（1）、在上面的GitHub网页中，拉到底部可以看到：

然后在全局中执行命令：sudo npm install -g @vue/cli即可。

最后，

vue -V //可以查看到当前的vue是3.0版本了

（2）、查看vue 相关指令

vue --help 

查看到的常用指令:

-V：查看版本号
-h:
create:创建一个项目
add: 在项目中创建插件（相当于之前的 “npm install”）
invoke:在已创建好的项目中调用插件
inspect：检查webpack配置
serve:开发环境——npm run serve（相当于之前的npm run dev）
build:生产环境，打包上线的
ui:调用一个ui库

（3）、创建项目

//执行：
vue create vue2-demo

在下面的选项中选择Manually select features,点击enter后，在显示的列表中通过上下键+空格选择需要的插件。下面根据需要选择即可。

（4）、依次按照下面的步骤创建一个专属的脚手架，这样下次创建项目的时候就能直接使用“testnewcli”这个脚手架了。

// vue.config.js 配置说明
// 这里只列一部分，具体配置惨考文档啊
module.exports = {
 // baseUrl type:{string} default:'/'
 // 将部署应用程序的基本URL
 // 将部署应用程序的基本URL。
 // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
 // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
 baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
 // outputDir: 'dist',
 // pages:{ type:Object,Default:undfind }
/*
 构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
 个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
 的字符串，
 注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的								 
 1/3    1 2 3 下一页 尾页