vue那点事儿
来源:互联网 发布:windows安装光盘下载 编辑:程序博客网 时间:2024/06/15 08:20
1 vue-cli vue脚手架
脚手架做什么的?1生成目录结构 2 完成本地开发调试 3 在编写完代码后对代码进行压缩和部署 4 利用热加载特性来提高编程效率 5使用它的单元测试来测试代码功能
如果用?
首先 要确保 计算机安装了 node npm vue
然后 安装vue-cli
npm install -g vue-cli (全局安装vue-cli)
安装成功后 使用脚手架初始化项目
vue init webpack projectname(项目名称)
然后根据提示一步一步设置即可
创建成功后 控制台会提示 cd projectname (进入项目目录)
npm install (安装相关插件)
npm run dev (启动项目)
这样一个简单的vue项目就搭建成功了 O(∩_∩)O~
<------------------------我是分割线-------------------->
在webstorm上 如何启动项目?
首先找到package.json文件 右键选择 show npm scripts 就会在左下方出现package.json里的scripts中定义的命令,双击 就可以运行了
<--------------------------我是分割线----------------->
文件介绍 main.js
main.js这是项目的入口文件
import Vue from 'vue'import App from './App'import router from './router
因为用到了vue所以要引入vue import Vue from 'vue'
还要引入App.vue 这里使用的是相对路径 相对main.js import App from './App' 因为webpack.base.conf.js里配置了不用使用后缀名
所以不用写后缀名
因为使用了路由所以要引入路由的配置文件 import router from './router' 这里引入的是router/index.js
如果要引入某个目录下的index.js 可以简写到目录即可
Vue.config.productionTip = false
这句话是用来关闭生产环境提示的
new Vue({ el: '#app', router, template: '<App/>', components: { App }})
<template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> </div></template><script>export default { name: 'app'//当前组件的名字}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style><-------------------------------------------分割线------------------------------------------>
vue-router 管理视图
作用:使组件与url一一对应 当url hash值变化时 更换组件 单页面应用 方便管理
步骤:
1安装(vue-cli已经默认安装)
npm install vue-router
2 引入
import Router from 'vue-router'
3 作为插件使用
Vue.use(Router)
4创建实例 var router=new Router({
routes:[
]
})
5注入
new Vue({
el:"#app",
router,
template:'<App />',
components:{App}
})
未完 待续
- vue那点事儿
- 程序员那点事儿
- XML那点事儿
- 喝酒那点事儿
- P2P那点事儿
- 招聘那点事儿
- 性能那点事儿
- CMD那点事儿
- 面试那点事儿
- AOP 那点事儿
- 【中差评也就那点事儿】
- 系统维护那点事儿
- Proxy 那点事儿
- ContentProvider 那点事儿
- Lock 那点事儿
- ThreadLocal 那点事儿
- 结婚那点事儿
- Maven 那点事儿
- 分布式搜索引擎ElasticSearch+kibana+marvel+sense安装
- python 实例(利润)
- vim鼠标模式打开与关闭
- 界面内嵌多种卡片视图(ViewPager、RadioGroup)
- 2D图像中点的旋转
- vue那点事儿
- Web集成工具Thinfinity® VirtualUI™ v2.0发布丨附下载
- React Native之AsyncStorage本地存储
- 模拟实现atoi和itoa函数
- POJ 2886 Who Gets the Most Candies?(反素数+数学推导+模拟+线段树||树状数组+二分)
- Android-AutoCompleteTextView,自动补全输入框
- 森雅S80停产
- TensorFlow文本摘要生成
- 【Java进阶】Java浅克隆和深克隆