后端小白的VUE入门笔记, 进阶篇

使用 vue-cli( 脚手架) 搭建项目

基于vue-cli 创建一个模板项目
通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli

如果没有安装的话,使用如下命令全局安装
cnpm install -g vue-cli

创建一个基于webpack的新项目,在这过程中, 会安装依赖
vue init webpack 项目名

启动
cd vue-router-demo
npm start

常用的目录结构

如果我们的项目是通过脚手架搭建的,这已经是一个比较完善的种子项目了

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules: 在上面安装的依赖,都存放在这个文件夹下
|-- src : 源码文件夹,我们后续开发的组件和js分门别类的放在这里面
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 他就相当于maven的pom.xml, 里面存放着相关的依赖信息和项目的版本信息
|-- README.md: 应用描述说明的 readme 文件

配置config/index.js

可以在config/index.js中做一下的常用配置

• 添加跨域的配置
• 配置项目的主机名,端口号
• 配置是否打开浏览器
• 代码检查工具eslint

在开发的时候我们主要还是关注src文件, 后来需要的路由,store,ajaxApi,以及其他组件全部在创建在这个文件夹下

const path = require('path')
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}, //添加跨域的配置

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9528, // 配置是否打开浏览器
    autoOpenBrowser: true,  //配置是否打开浏览器
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: false,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

入口js文件 main.js的主要作用

• 创建vue实例, 关联index.html中id为app的div代码块
• 添加项目中的路由模块 router
• 添加store模块---vuex

一般做好这不配置之后main就不用再改动了

import App from './App'
import router from './router'
import store from './store'

Vue.use(ElementUI, { locale })

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

根组件App.vue

其实每一个组件都可以完整的拥有下面三部分, 当然如果哪个组件中不需要添加css样式,可以把最后一个style或者script标签去掉

export default {
  name: 'app'
}

组件间的相互调用

比如根组件想使用hello.vue组件,怎么做呢?

像下面这样,三步走

• 第一步:引入组件
• 第二步:将组件映射成target标签
• 第三步使用标签