# 安装环境

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,下面安装需要的相关软件。

NODE

请先访问 https://nodejs.org/zh-cn/安装NODE(安装LTS版本即可)

NVM

nvm是node版本管理工具为了解决node各种版本存在不兼容现象,让你在同一台机器上安装和切换不同版本的node的工具。

请查看后盾人NVM文档 进行安装

淘宝镜像

使用淘宝镜像可以快速安装NPM依赖包

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,使我们可以专注到项目开发中,而不必纠结配置的问题。

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

# 创建项目

VUE CLI 是一个基于 Vue.js 进行快速开发的完整系统,项目绝大多数的管理都可以在浏览器中进行。

可以使用两种方式创建VUE项目

# 命令行

首先运行命令来创建项目

vue create hello-world

初次运行时可以选择包管理仓库,可以选择淘宝镜像可默认仓库

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

选择项目配置(默认即可)

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

选择包管理器(使用NPM即可)

Vue CLI v4.4.4
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

初始安装后会创建安装配置文件 ~/.vuerc ,后面使用命令安装时将使用该配置。

下面配置配置文件使用了NPM进行包管理,并淘宝镜像下载软件包

{
  "useTaobaoRegistry": true,
  "packageManager": "npm"
}

# 图形界面

使用图形化界面管理项目是非常直观和简单的,运行以下命令会在浏览器中打开项目管理程序。

vue ui

选择项目安装的目录,点击「在此创建项目」按钮

image-20200621173807410

设置项目目录,并选择包管理器

image-20200621174144784

选择项目预设(预设就是一套定义好的插件和配置),一般情况下选择默认即可。之后点击创建项目即完成了VUE项目的安装。

image-20200621174325302

# 基本配置

下面来对项目做初始的个性配置。

# 目录定制

有些后台程序访问有固定的目录,下面将项目的编译目录定义在../public/app目录中

修改项目生成目录

image-20200215014257500

修改编译目录

选择 任务/参数 来配置

image-20200215014901497

在弹出的窗口中设置输出目录

image-20200215014809782

# 环境变量

根据不同运行环境设置变量,下面创建 .env.development.env.production 两个配置文件。

  • 要在项目根目录创建
  • 如果vscode创建时无效,使用命令 touch .env.development 创建
  • .env.development是执行 npm run serve 时使用,用于开发环境
  • .env.production 是执行 num run build 时使用,用于生产环境

定义配置

文件内容是键值对形式,并且键必须以VUE_APP开始。如果修改了配置需要重起项目

VUE_APP_API_URL=http://hdcms.com/api

使用配置

在项目的组件、路由等位置都可以使用配置项了

console.log(process.env.VUE_APP_API_URL);

# 路径符号

在phpstorm或webstorm中不支持@路径符号,创建 alias.config.js文件内容

const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src')
        }
    }
};

在软件中配置webpack

image-20200215150522486

# 插件管理

vue-cli提供了插件与扩展两种方式增强功能

  • 插件中对针对VUE.JS的功能扩展,但有时插件作者更新不积极,可能会有问题
  • 扩展就是NPM的扩展包,下载后相比插件安装方式需要自行针对VUE配置
  • 如果插件是扩展包官方针对VUE推出的,安装使用更便捷
  • 否则使用扩展方式安装,再参考扩展文档进行配置更可靠些

# vue-router/vuex

首先安装 vue-router 与 vuex 插件

image-20200215015626162

# core-js

默认core-js安装的版本低,可以先删除旧版后在 依赖 中安装最新版本

image-20200223231626997

# UI

插件管理中安装bootstrap与element ui两个风格包

image-20200223231742041

# moment

插件库中提供的moment包有作者更新不及时,建议使用 扩展方式来安装

# sass&less

项目开发中经常需要使用 sass 处理CSS样式,比如我们使用 bootstrap 时, 所以需要安装 sass编译环境。

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

引入 bootstrapfont-awesome

下面是在 script 里引入

<script>
import HelloWorld from './components/HelloWorld.vue'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap'
import 'font-awesome/css/font-awesome.min.css'
...
</script>

下面是在 style引入 bootstrap 样式

<style lang="scss">
  @import '~bootstrap/dist/css/bootstrap.min.css';
  @import '~font-awesome/css/font-awesome.min.css';
...
</style>

~ 可以理解为 node_mobules