VUE CLI

1.什么是Vue CLI (Command Line Interface)?

Vue CLI是vue官方提供的脚手架工具，
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

2.如何安装Vue-cli和使用Vue-CLI?

安装脚手架工具: npm install -g @vue/cli

卸载电脑上已存在Vue :

npm uninstall vue-cli -g

安装新版本的 Vue :

npm install -g @vue/cli

 -g 为全局安装

查看是否安装成功以及版本

vue -V

通过脚手架创建项目:

vue create my-project

先选择默认配置来创建项目

像生成disk文件需要使用命令

npm run build

3.通过Vue-CLI生成的项目结构解读

3.1在Vue-CLI2. x中生成的项目结构中我们能够看到build文件夹和config文件夹

这两个文件夹中存储了webpack相关的配置，我们可以针对项目需求修改webpack配置

3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹

这么做的目的是为了化繁为简，让初学者不用关心webpack,只用关心如何使用Vue

再新建一个

node_ modules文件夹:存储了依赖的相关的包
public文件夹:任何放置在public 文件夹的静态资源都会被简单的复制，
而不经过webpack。你需要通过绝对路径来引用它们
一般用于存储些永远不会改变的静态资源或者webpack不支持的第三方库

src文件夹:代码文件夹

assets文件夹:存储项目中自己的一些静态文件(图片/字体等) (public 里面的静态资源是直接拷贝,但是这里面的静态资源是经过webpack处理的)
components文件夹: 存储项目中的自定义组件(小组件，公共组件)
views 文件夹:存储项目中的自定义组件(大组件，页面级组件，路由级别组件)
router文件夹:存储VueRouter相关文件
store文件夹:存储Vuex相关文件
App.vue :根组件
main.js:入口的

如果出现报错的：

需要使用

Vue.use(Vuex)

完整代码：

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import One from '../components/One'
import Two from '../components/Two'
Vue.use(Router)
const routes = [
  { path: '/one', component: One },
  { path: '/two', component: Two }

]
// 创建router对象
const router = new Router({
  routes// 缩写。相当于routes：routes
})
export default router

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 存储全局共享数据
  state: {
    name: '小林'
  }
})
// 将变量暴露出去
export default store

main.js

import Vue from 'vue'
// 导入APP组件
import App from './App'
// 在入口文件处导入store
import store from './store/index'
import router from './router/index'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: store,
  // 这样就可以用自定义的组件替换我界面上的区域
  render: c => c(App),
  router: router
})

App.vue

<!--template 适用于编写当前组件的结构代码的-->
<template>
<div id="app">

    <router-link to="/one">这是第一个组件</router-link>
    <router-link to="/two">这是第二个组件</router-link>
    <!--  指定出口-->
    <router-view></router-view>
    <!--  <p>{{msg}}</p>-->
    <!--  <button @click ="say">我是按钮</button>-->
    <!--  <One></One>-->
    <!--  <Two></Two>-->
    <!--  <button @click="getName">获取共享数据</button>-->
    </div>
</template>
<!--script地用于编写当前组件的业务代码-->
<script>
    // eslint-disable-next-line no-unused-vars

    export default {
        name: 'App.vue',
        data: function () {
            return {
                msg: '123456'
            }
        },
        methods: {
            say () {
                console.log('say')
            },
            getName () {
                // console.log(this.name)
                console.log(this.$store.state.name)
            }
        },
        components: {
            // 注册组件
            // One: One,
            // Two: Two
        }
    }
</script>
<!--style是用来编写当前组件的样式代码的-->
<style scoped>
    p{
        color: pink;
    }
</style>

One.vue

<template>
<div>
    <p>我是第一个组件</p>
    </div>
</template>

<script>
    export default {
        name: 'One'
    }
</script>

<style scoped>
    /*注意点：默认情况下组件中的style中设置的样式是全局的样式
    如果只想在该组件中有效需要给style加上一个scoped属性*/
    p{
        background: #42b983;
    }
</style>

Two.vue

<template>
<div>
    <p>
        我是第二个组件
    </p>
    </div>
</template>

<script>
    export default {
        name: 'Two'
    }
</script>

<style scoped>

</style>

如何使用router总结：
1.首先在router文件下新建一个index.js导入vue和vue-router，并且告诉vue你要是用router
2.建立const指定路径和组件，创建router对象，把router对象暴露出去
3.在main.js中导入我们创建好的router，把它import进来。在vue实例上绑定router:router:router
4.绑定之后就可以在需要的地方使用这个路由地址，指定路由出口

要想获取数据要用在index.js中导入vue和vuex：
1.Vue.use(Vuex)然后const

2.再export导出

3.在入口文件中导入我们创建好的index.js

4.然后将其绑定到vue实例上

1如何配置Vue-CLI创建项目的webpack配置?
默认情况下通过Vue-CLI创建的项目已经自动给我们配置好了webpack
但是有时候默认的配置可能不能满足我们的需求，例如我们想修改输出目录名称，想增加些插件等
但是Vue-CLI创建的项目里又没有webpack配置文件，那么我们应该如何修改或增加webpack配置呢?
我们可以通过新建vue.config.js的方式来修改配置
我们可以通过在vue. config. js中的confi gurelWebpack属性来新增webpack配置

posted @ 2021-09-25 21:39 记录学习Blog 阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部