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


Posted in Javascript onOctober 24, 2018

vue-cli 3.0版本

目前官网上还不是3.0版本,所以需要在github上面学习使用:github网站:https://github.com/vuejs/vue-cli/tree/dev/docs

1、项目搭建

(1)、在上面的GitHub网页中,拉到底部可以看到:

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

然后在全局中执行命令: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

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

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

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

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

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

// 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里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
 // pages: {
  // index: {
   // entry for the page
   // entry: 'src/index/main.js',
   // the source template
   // template: 'public/index.html',
   // output as dist/index.html
   // filename: 'index.html'
  // },
  // when using the entry-only string format,
  // template is inferred to be `public/subpage.html`
  // and falls back to `public/index.html` if not found.
  // Output filename is inferred to be `subpage.html`.
  // subpage: 'src/subpage/main.js'
 // },

 // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
 lintOnSave: true,
 // productionSourceMap:{ type:Bollean,default:true } 生产源映射
 // 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
 productionSourceMap: false,
 // devServer:{type:Object} 3个属性host,port,https
 // 它支持webPack-dev-server的所有选项

 devServer: {
  port: 8085, // 端口号
  host: 'localhost',
  https: false, // https:{type:Boolean}
  open: true, //配置自动启动浏览器
  // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
   },
   '/foo': {
    target: '<other_url>'
   }
  }, // 配置多个代理
 }
}

2、添加插件(新版本提供的添加方法)

/添加插件的新方法:vue add
vue add vuetify

注:如果我们安装的是模块依赖,建议使用npm install ;如果安装的是组件UI,可能会对当前的页面UI有影响的情况下,就使用vue add方法安装。

比如上面的vuetify是一个vue的UI库,会对页面结构布局产生影响,所以使用vue add 方法;比如我们安装axios插件,就是用npm install axios就可以了。

3、全局环境变量

(1)、创建".env"文件:

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

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

<template>
 <div>
 <h1>{{url}}</h1>
 </div>
</template>
<script>
export default {
 data() {
 return {
 //调用全局的环境配置
  url: process.env.VUE_APP_URL
 };
 }
};
</script>

4、独立运行.vue文件

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

如上图中,在根目录下创建的"hello.vue"文件如何独立运行起来呢?(不依赖脚手架)

//可行方案:安装插件
sudo npm install -g @vue/cli-service-global

//之后执行命令:
vue serve hello.vue

//这样就可以在浏览器看到hello.vue相对应的页面了

5、配置的基础路径(vue.config.js)

根目录创建文件"vue.config.js",

//vue.config.js中配置
module.exports = {
 baseUrl: "/", //根路径
 outputDir: "dist", //构建输出目录,执行:npm run build后项目打包在dist文件下
 assetsDir: "assets", //静态资源目录(js,css,img,fonts)
 linitOnSave: false, //是否开启eslint保存检测,有效值:true || false || "error"
}

6、配置跨域请求

在vue.config.js中进行配置:

module.exports = {
 baseUrl: "/", //根路径
 outputDir: "dists", //构建输出目录
 assetsDir: "assets", //静态资源目录(js,css,img,fonts)
 lintOnSave: false, //是否开启eslint保存检测,有效值:true || false || "error"
 devServer: {
  open: true, //浏览器自动打开页面
  host: '127.0.0.0', //域名
  //host: "0.0.0.0", //如果是真机测试,就使用这个IP
  port: 8060,
  https: false,
  hotOnly: false, //热更新(webpack已实现了,这里false即可)
  proxy: {
   //配置跨域
   '/api': {
    target: "http://localhost:2020/api",
    ws:true,
    changOrigin:true,
    pathRewrite:{
     '^/api':''
    }
   }
  }
 }
}

7、加载json数据

根目录下创建data文件夹,里面包含文件data.json,然后在vue.config.js文件中进行配置。

const goods = require("./data/goods.json");
module.exports = {
 baseUrl: "/", //根路径
 outputDir: "dists", //构建输出目录
 assetsDir: "assets", //静态资源目录(js,css,img,fonts)
 lintOnSave: false, //是否开启eslint保存检测,有效值:true || false || "error"
 devServer: {
  open: true, //浏览器自动打开页面
  host: 'localhost', //域名
  port: 8060,
  https: false,
  hotOnly: false, //热更新(webpack已实现了,这里false即可)
  //加载本地josn数据
  //参见webpack官网:https://webpack.docschina.org/configuration/dev-server/#devserver-before
  before(app) {
   //http://localhost:8090/myapi/goods
   app.get("/myapi/goods", (req, res) => {
    res.json(goods);
   })
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue实现树状表格效果
Dec 29 Vue.js
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 #Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 #Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 #Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
法压式咖啡之制作法
2021/03/03 冲泡冲煮
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
如何判断php数组的维度
2013/06/10 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
javascript 精粹笔记
2010/05/09 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue组件的写法汇总
2018/04/12 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python基础教程之Hello World!
2014/08/29 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python标准库sched模块使用指南
2017/07/06 Python
python创建文件备份的脚本
2018/09/11 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python求前n个阶乘的和实例
2020/04/02 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书