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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
vue使用Axios做ajax请求详解
Jun 07 Javascript
js图片上传的封装代码
Aug 01 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JS实现九宫格拼图游戏
Jun 28 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
table行随鼠标移动变色示例
2014/05/07 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
angular实现spa单页面应用实例
2017/07/10 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
Vue 中axios配置实例详解
2018/07/27 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python常见数据结构详解
2014/07/24 Python
跟老齐学Python之集合的关系
2014/09/24 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
庆元旦活动总结
2014/07/09 职场文书
六查六看剖析材料
2014/10/06 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript