vue脚手架 vue-cli
cnpm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project
里需要进行一些配置，默认回车即可
cd my-project //到你的下载那个目录
cnpm install //初始化vue
cnpm run dev 运行vue
访问 localhost:8080
出现页面即可
再次运行的话
cnpm run dev
build //项目构建webpack 代码
config // 配置目录，包括端口号等 初学可以使用默认的
node_modules //项目加载依赖模块
src
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
main.js: 项目的核心文件。
static //静态资源目录，如图片、字体等。
test //初始测试目录，可删除
.xxxx文件 //这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式
vue脚手架
是基于webpack2.0搭建的（现在webpack已经有3.0了）
npm cache clear --force（报错时执行此代码，并且再次执行install）
cnpm install vue-cli(加个 -g是全局安装)
vue init webpack demo（建立脚手架）
cnpm install (初始化依赖)
cnpm run dev
cnpm run build(打包生成线上目录)
npm install --save-dev prettier@1.12.0 再一次开启
包的安装
@（指定版本）
脚手架的两种模式
hash、history
<router-link tag=""(指定标签)></router-link>
sass
cnpm install --save-dev sass-loader
cnpm install --save-dev node-sass
或者
// 命令行输入
cnpm install node-sass -D
cnpm install sass-loader -D
// 在组件中使用
<style lang="sass" scoped></style>或者<style lang="scss" scoped></style>
//完成sass
vuex
cnpm install vuex --save
spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
在src文件下面新建store>index.js
当然文件名你随便取 但是index.js是必须的 不用index.js也行但是你在main.js中引入的话你就要把他的文件名写上
在index.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
new Vuex.Store({
state:{
//定义数据
}
})
在main.js中引入
// 名字小写
import store from './store'
new Vue({
el: '#app',
router,
components: { App },
store,
template: '<App/>'
})
在子组件中获取数据
computed:{
//自定义事件名称 函数写法
tableAll(){
//获取store > index.js > state 中的数据返回给函数名
return this.$store.state.tableArr
}
}
在子组件中操作数据
methods:{
//函数名称
参数
add(index){
//通过commit("add",index)传递
this.$store.commit("add",index);
//1个参数 自定义事件名字
//2个参数 你要给store > index.js 传递的参数
}
}
store > index.js 接收子组件中操作数据
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
mutations的两种方法
第一种提交mutation的方式
this.$store.commit('方法'{参数})
第二种提交mutation的方式
this.$store.commit({
type: '方法',
形参: 实参
})
mutations:{
//第一个参数是默认state直接可以操作
//第二个参数是你在子组件传递过来的数据
add(state,index){
state.tableArr[index].num++
state.tableIs.push(state.tableArr[index]);
},
}
Bootstrap，Jquery
cnpm install jquery --save-dev
命令cnpm install bootstrap --save-dev
npm install --save popper.js
在src/main.js文件中 引入bootstrap
import './assets/css/bootstrap.css'
import './assets/js/bootstrap.min'
在build/webpack.base.conf.js中添加如下内容：
//引入
var webpack = require('webpack')
//在module.exports = {}最下方
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
//在 main.js 里引入
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import $ from 'jquery'
//测试jq在App.vue里
$(function () {
alert('234')
})
//测试bootstrap在App.vue里
<template>
<div id="app">
<router-view/>
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">测试按钮</button>
</div>
</div>
</div>
</div>
</template>
axios
cnpm install axios
cnpm install --save axios vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
amaze UI(妹子UI)
cnpm install amaze-vue --save
在vue-cli项目下的package.json文件中，"devDependencies"项中添加 "amaze-vue": "（具体的版本号)"("amaze-vue": "^1.1.12",)
在项目的根目录下，执行 npm install （将依赖模块的源代码导入到node_modules中）
在 /src/main.js中添加如下代码
import AmazeVue from 'amaze-vue';
import 'amaze-vue/dist/amaze-vue.css';
Vue.use(AmazeVue);
Element ui
npm i element-ui -S
在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
网友评论