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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
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
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
详解YII关联查询
2016/01/10 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python爬虫请求头的使用
2020/12/01 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
为什么会有内存对齐
2016/10/10 面试题
2014年小学国庆节活动方案
2014/09/16 职场文书
学习保证书
2015/01/17 职场文书
初级职称评定工作总结
2015/08/13 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书