Vue-cli 2
安装:vue
npm install -g vue
npm install -g @vue/cli
1.npm install webpack -g
全局安装webpack
npm install webpack -g
2.全局安装vue脚手架
npm install -g @vue/cli-init
3.初始化vue项目
vue init webpack appname
意思是创建一个项目名是appname 的vue项目
https://www.cnblogs.com/candy-Yao/p/9356101.html
目录介绍
build 和放和打包工具相关的
congif 配置信息,端口等
node_modules 所有安装的依赖
src 编写代码的文件
static 静态文件
.babelrc 语法转义相关配置
babelrc文件es6转es5
https://blog.csdn.net/yuzheh521/article/details/106151359
{
"presets": [
["env", {
"modules": false,
"targets": {
//支持市场份额大于百分之一的,最后两个版本,不支持ie小于8的浏览器
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
Vue-cli 3以上版本
目录
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/Hello">Go to 页面</router-link>
<router-link to="/">Go to 首页面</router-link>
<!-- 路由视图,根据访问页面动态决定 -->
<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>
路由router下面的index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: 'Hello',
component :Hello
}
]
})
整合elementUI
在main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//导入ElementUI
import ElementUI from 'element-ui'
//导入ElementUIcss 样式
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
//使用ElementUI
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//路由规则 此处简写, router:router
components: { App },//组件,此处简写,属性名和变量名一样的时候,可以简写
template: '<App/>'
})
vue 模块快速生成模板
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "生成vue模板"
},
"http-get请求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'get',",
"params: this.\\$http.adornParams({})",
"}).then(({ data }) => {",
"})"
],
"description": "httpGET请求"
},
"http-post请求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'post',",
"data: this.\\$http.adornData(data, false)",
"}).then(({ data }) => { });"
],
"description": "httpPOST请求"
}
}