1.准备工作
安装Vue
2.开始
1.vue init webpack my-project
会提示，1.说包名，注意小写
2.说包描述
3.作者
4.是否需要路由：选择是
5.其余全部点否
VUE搭建完毕
2.安装vuex
1.npm install vuex
然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:
impor tVue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
conststore =newVuex.Store();
export default store;
接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：
importstorefrom'./store'//引入store
new Vue({
el:'#app',
router,
store,//使用store
template:'<App/>',
components: { App }
})
Vuex安装完毕
3.安装Element UI
1.npm i element-ui-S
在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
安装完毕
4.安装jquery
npm install jquery
安装完毕
在build/webpack.base.conf文件当中引入jquery
module.exports= {
... resolve: { extensions: ['.js','.vue','.json'],
alias: {
'vue$':'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')
} }, ...}
import $ from 'jquery'
export default{
name:'hello',
data () {
return{
msg:'Welcome to Your Vue.js App'
}
},
mounted:function(){
lettest = $('#test').text()console.log(test)
},
methods:{ }
}
5.安装less
npm install less less-loader --save
main.js 全局引入
var Less = require('Less');
在组件中
<style scoped lang="less">
@width: 100%;
@height: 100px;
@color: red;
.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
};
</style>
安装完毕
6.安装axios
npm install axios
cnpm install axios //taobao源
在main.js引入
import axios from 'axios'
Vue.prototype.$axios =axios
