VUE-命令行界面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 - help :查看的常见说明

-V:检查版本号-h:create3360创建一个项目add:在项目中创建一个插件(相当于以前的‘NPM install’)invoke :在创建的项目中调用插件inspect:检查webpack配置serve:开发环境3354 NPM runserve(相当于以前的NPM rundev)构建3360生产环境，并对其进行打包。

(3)创建项目

//执行：vue createvue 2-demo

从以下选项中选择手动选择功能，单击输入，然后使用上下键空间从显示的列表中选择所需的插件。可以根据需要选择以下选项。

(4)按照以下步骤依次创建专用脚手架，以便下次创建项目时可以直接使用脚手架“testnewcli”。

//vue.config.js配置说明//这里只列出了一部分。具体的配置测试文档是module . exports={//base urltype 3360 { string } default : '/'//待部署应用程序的基本URL//待部署应用程序的基本URL。//默认情况下，Vue CLI假设您的应用程序将部署在域的根目录中。//https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/,请将baseUrl设置为“/my-app/.”base URL : process . env . node _ env==“production”？/online/':'/'，//output dir : NPM运行期间生成的文件目录构建类型：string，default 3360 ' dist '//output dir : ' dist '，//page 3360 { type : object，default3360 und find}/*构建多页模式应用程序。每个页面都应该有一个对应的JavaScript入口文件。该值应该是一个对象，其中键是条目的名称，该值或者是指定其条目、模板和文件名的对象，或者是指定其条目的字符串。注意：请确保页面中配置的路径和文件名存在于您的文档目录中，否则您将在启动服务时报告错误。*///page s : {//index : {//该页的条目//entry:' src/index/main.js '，//源模板//template : ' public/index.html '，//输出为dist/index . html//filename : ' index . html '/}，//当使用只包含条目的字符串格式时，//模板被推断为' public/subpage.html` //，并退回到' public/index . html。//输出文件名推断为“Subpage.html”。//sub page : ' src/sub page/main . js '/}，//lintonsave:{ type : boolean default 3360 true }询问是否要使用eslint lintOnSave: true。//production source map:{ type : bollan，default3360true}生产源映射//如果在生产过程中不需要源映射，将此设置为false可以加快生产速度并构建productionSourceMap: false。//devserver 3360 { type : object } 3属性主机、端口、https //它支持webPack-dev-server devserver 3360 { port : 8085，//端口号host: 'localhost '，HTTPS : false，//HTTPS : { type : Boolean } open 3360 True，//配置自动浏览器启动//proxy 3360 ' http://LocalHost 33604000只有一个代理： { '/API ' : { target : ' URL '，ws: true，changeorigin3360 true}，'/foo ' : { target : ' other _ URL ' }，//配置多个代理} 2。增加

/添加插件的新方法：vue addvue add vuetify注意：如果我们安装模块依赖，建议使用npm安装；如果安装的组件UI可能会影响当前页面UI，请使用vue add方法进行安装。

比如上面的vuetify是vue的一个UI库，会影响页面结构的布局，所以使用vue add方法；比如我们安装axios插件，可以用NPM安装Axios。

3.全球环境变量

(1)创造。“env”文件：

(2)在组件中使用全局变量

template div h1 { { URL } }/h1/div/templatescriptexportdefault { data(){ return {//调用全局环境配置URL 3360 process . env . vue _ app _ URL }；}};/script4。运行。vue独立文件

如上所示，在根目录中创建的“hello.vue”文件是如何独立运行的？(独立于脚手架)

//可行的解决方案：安装插件sudonpminstall-g @ vue/CLI-service-global//，然后执行命令：vueserve hello.vue//,这样就可以在浏览器中看到hello.vue对应的页面。5.配置的基本路径(vue.config.js)

根目录创建文件' vue.config.js '，

//configure module . exports={ baseurl : '/' in//vue . config . js，//根路径outputDir: 'dist '，//生成输出目录，执行：npm运行生成后，项目打包在dist文件下，assetsDir: 'assets '，//静态资源目录(js，CSS，img，font)linitonssave : false。//是否开启eslint保存检测，有效值：true || false || 'error'}6。配置跨域请求

在vue.config.js中配置：

module.exports={baseurl:'/'，//根路径outputDir: 'dists '，//构建输出目录assets dir3360' assets '，//静态资源目录(js，CSS，img，字体)lintonsave 3360 false，//是否开启eslint保存检测，有效值为： true | | false | | ' error ' devserver 3360 { open : true，//浏览器自动打开页面host: 此处为false)proxy : {//配置跨域'/API ' : { Target : ' http://LocalHost 33602020/API '，json 3360 True，Chang Origin 3360 True，路径重写3360 {'/API' : ' '

在根目录下创建一个数据文件夹，其中包含文件data.json，然后在vue.config.js文件中进行配置。

const goods=require('。/data/goods . JSON’)；module.exports={baseurl:'/'，//根路径outputDir: 'dists '，//构建输出目录assets dir3360' assets '，//静态资源目录(js，CSS，img，字体)lintonsave 3360 false，//是否开启eslint保存检测，有效值为： True | | false | | ' error ' devserver 3360 { open : True，//浏览器自动打开页面host: ' localhost})}}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。