码迷,mamicode.com
首页 > 其他好文 > 详细

Vue脚手架的搭建

时间:2020-05-01 00:56:28      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:tar   back   mic   com   安装   指令   nts   ffffff   配置文件   

Vue提供了一个官方的CLI,为单页面应用(SPA)快速搭建繁琐的脚手架。

Vue CLI官方文档  =>  https://cli.vuejs.org/zh/guide/

  一、基本安装    

1. 安装指令  npm i @vue/cli -g

2. 检查是否安装或者版本   vue --version

3. 创建vue项目  vue create vue-app

在安装的时候选择手动,然后根据需求进行选择配置,后期也可以自己创建一个vue.config.js文件进行配置修改。

比如:在安装时,选择了标准严格模式(ESLint + Standard config),在脚手架中创建一个vue.config.js文件,文件里面输入以下代码,表示将其关闭,具体配置可参考官方文档。

1 module.exports = {
2   lintOnSave: false
3 }

4. 进入项目 cd vue-app

我们可以在package.json文件里,"scripts"添加以下内容

技术图片

 5. 然后命令行 npm start

  二、基本使用  

 package.json文件包含了所有的插件的配置信息。src文件夹里的APP.vue是整个项目的根组件,将项目路由出口固定在这里;与之对应的main.js文件为全局的、启动项目的核心文件。也以在全局自己创建一个vue.config.js文件,作为整个项目的配置文件。

src文件夹里,assets文件夹代表项目的资源,比如项目所需图片等等;components文件夹里放的是单一页面中所用的所有小组件;router文件夹index.js文件写入的是整个项目的路由;store文件夹里的index.js文件为vuex相关文件;views文件夹里放的是项目中单一页面视图的组件。

(1)APP.vue文件里将路由出口设置在这里

技术图片

 (2)在main.js文件中引入所有主要文件,这里引入的都为全局文件。

技术图片

 Vue.config.productionTip = false  表示关闭生产模式下给的提示。

(3)在Home.vue文件

技术图片

 (3)router下的index.js路由文件

技术图片

 (4)新组件的创建与设置

技术图片

 (4.1)让新组件在About.vue组件的路由中显示

技术图片

 (4.1.1)在About.vue组件设置子路由出口

技术图片

 

Vue脚手架的搭建

标签:tar   back   mic   com   安装   指令   nts   ffffff   配置文件   

原文地址:https://www.cnblogs.com/yznotes/p/12811527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!