新建 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
)
})