[JavaScript知识库]vue-cli 入门

vue-cli：官方提供的一个脚手架，用于快速生成一个vue模板

1. 初始化项目

? ? ? ? vue init webpack 项目名

2. 进入项目目录，安装所有依赖

? ? ? ? npm install

3. 启动

? ? ? ? npm run dev

细节：

components：存放模板程序

config-index.js：可修改端口号、静态文件路径等

?

程序的导出与导入

导出：export default { }

导入：import 程序名 from '程序路径'

使用路由（导入依赖都这样）

1. 安装路由依赖

npm install vue-router --save-dev

2. 在 main.js?导入

import?VueRouter?from?'vue-router'

3. 在 main.js 声明使用

Vue.use(VueRouter);

4. 在component文件夹中编写组件程序

<template>
  
</template>

<script>
  export default {
      name: 'Content'
  }

</script>

<style>
</style>

5. 在app.vue导入组件

<template>
  <div id="app">
    <Content></Content>
  </div>
</template>

<script>
import Content from './components/Content.vue'

export default {
  name: 'App',
  components: {
    Content
  }
}
</script>

路由，使用? js? 实现：

1. 在src目录编写index.js文件

import VueRouter from "vue-router";
import Vue from "vue";
import Content from '@/components/Content'

Vue.use(VueRouter);


export default new VueRouter({
  routes: [
    {
      path: '/content',
      name: 'content',
      component: Content
    },
  ]
})

2. 在main.js下导入index.js，将路由导入到vue

// 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'
import App from './App'
// index.js不用写，默认就是index.js
import router from './router'

Vue.config.productionTip = false



new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在主目录中实现

<template>
  <div id="app">
    <router-link to="/content">内容区域</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

使用element-ui

1. 安装element-ui

npm install element-ui --save-dev

2. 在 main.js 中导入element-ui

// 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'
import App from './App'
// index.js不用写，默认就是index.js
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})