vue基础汇总-vue-cli

新建 vue-cli

官网
vue-cli 3.0 版本
vue-cli 最全解析

全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本号检验是否成功

vue --version

创建项目

vue create 项目名(wangyi-app)

# 使用淘宝镜像
vue create myproject -r https://registry.npm.taobao.org

# 选择需要的选项

安装依赖:

# dependencies 是运行时依赖（生产环境)
npm install --save  package_name

# devDependencies 是开发时的依赖（开发环境）  
npm install --save-dev package_name

# 安装 vuex vue-router,和 iview 等与界面相关的插件
vue add package_name

运行:

# 注意要进入根目录
npm run serve

修改创建后的文件

App.vue:

• 删除掉所有样式
• 删除 template 中多余的代码, 只留一个 router-view 接口

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<style lang="less">
</style>

HelloWorld.vue: 删除

所有组件: 统一缩进

引进样式:

normalized.css: 复制到 public 文件夹下

<link  rel="stylesheet"  href="<%= BASE_URL %>normalize.css">

• reset.less: 重置样式(在 App.vue 引入, 也可以 main.js 中引入 reset.css)
• color.less: 颜色样式
• font.less: 字体样式
• common.less: 公共样式
• styles.less: 主体样式

<!-- App.vue -->
<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<style lang="less">
@import "@/assets/less/reset.less";
@import "@/assets/less/styles.less";
</style>

// styles.less
@import "./color.less";
@import "./font.less";
@import "./common.less";

组件全局注册

// 入口文件如: src/main.js
// 以下标记 *** 的表示需要根据情况修改
// import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components', // *** 一般不用修改,如果有改动就修改
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/ // *** 修改以匹配基础组件名
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})