Vue 项目环境搭建

项目搭建前准备

1. 全局安装@vue/cli@4.1.2以上版本

yarn add global @vue/cli@4.1.2

检查 Vue 版本

vue --version

2. Node.js v10以上版本

创建项目

vue create vue-demo

项目创建过程中会有一些配置项，这些配置直接影响后面开发的功能

选择手动选择
? Please pick a preset:
default (babel, eslint)
❯ Manually select features

使用空格进行选择
◉ TypeScript
◉ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◯ E2E Testing

是否使用class样式组件的语法
?Use class-style component syntax? (Y/n) y

是否Babel 和 TypeScript 一起联用
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

是否使用 history 模式（需要后台配置）
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

选择 CSS 预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

选择一个linter标准
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)

什么时候提示代码错误 使用空格取消第一个，再选第二个
? Pick additional lint features:
◯ Lint on save
❯◉ Lint and fix on commit

选择测试框架
? Pick a unit testing solution:
Mocha + Chai
❯ Jest

配置放在哪里
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json

是否保存以上的所有配置选项以供后面使用
? Save this as a preset for future projects? (y/N) n

本地运行项目

cd vue-demo
yarn serve

目录说明

image.png

• public/ 此目录放静态文件（不变的 icon，index.html，robots.txt）
• src/ 此目录放源代码
• src/assets 放资源（除JavaScript，TypeScript，CSS，HTML外的所有文件，例如图片）
• src/components 放组件
• src/router 放路由
• src/store 放store
• src/views 放页面（重要的页面，首页，关于页等）
• src/App.vue 整个应用的接口
• src/main.ts 入口文件
• src/registerServiceWorker.ts PWA相关文件
• src/shims-tsx.d.ts TypeScript声明
• src/shims-vue.d.ts TypeScript声明
• tsconfig.json TypeScript配置文件
• vue.config.js webpack配置文件

编辑器优化

Webstorm 添加 vue snippets

image.png

<template>
#[[$END$]]#
</template>

<script lang="ts">
export default {
name: "${COMPONENT_NAME}"
}
</script>

<style lang="scss" scoped>

</style>

VSCode 安装Vetur 和 Vue VSCode Snippets

import alias

JS/TS 使用@

@ 代表 src/

import HelloWorld from '@/components/HelloWorld.vue'
//两种写法等价
import HelloWorld from 'src/components/HelloWorld.vue'

SCSS 使用@

~@ 代表 src/，Webpack 配置方法如下

image.png

@import "~@/assets/style/test.scss";