【Vue】项目的创建

vue视频

Vue学习之vue-cli脚手架下载安装及配置

npm ERR! code 1

安装完脚手架之后

vue新建项目（-）vue-cli安装

vue init webpack myvue

cd myvue
cnpm install			或npm install
npm run dev				运行

Webpack

安装

npm install webpack -g
npm install webpack-cli -g

失败的话，使用cnpm


使用webpack

首先，理解模块化开发






大致理解模块化开发的好处

路由

安装

npm install vue-router --save-dev
npm install vue-router@3.2.0 -S

import Vue from 'vue'
import Router from 'vue-router'
import Content from "../components/Content";

//安装路由
Vue.use(Router);


//配置导出路由
export default new Router({
  routes:[
    {
      //路由路径  要跳转的组件
      path:'/Content',
      component:Content
    }
  ]


})

import router from './router/index' //自动扫描路由配置
  router,       //配置路由

<router-link to="/Content">显示</router-link>
<router-link to="/">返回</router-link>
<router-view></router-view>

Vuex

安装

npm install vuex --save

import Vue from 'vue'
import Vuex from "vuex";
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
      count:0
    },
    mutations:{
      increment: state => this.state.count++,
      decrement:state => this.state.count--
    }
  }
)

<template>
  <div class="hello">
    <h1>{{count}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },computed:{
    count(){
      return this.$store.state.count
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

axios

总结

Vue3.0项目搭建

Vue 3.0 初试-项目创建

手把手教你vue3.0项目搭建

node_modules

cnpm i -g node-sass