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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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微信公众号开发之翻页查询
2018/10/20 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
node.js博客项目开发手记
2018/03/16 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python3解释器知识点总结
2019/02/19 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
开放系统互连参考模型
2016/06/29 面试题
优纳科技软件测试面试题
2012/05/15 面试题
过滤器的用法
2013/10/08 面试题
如何客观的进行自我评价
2013/12/17 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
二年级小学生评语
2014/04/21 职场文书
10的分与合教学反思
2014/04/30 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
招商引资工作汇报
2014/10/28 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏