美文网首页
Vue 项目环境搭建

Vue 项目环境搭建

作者: 我是Msorry | 来源:发表于2020-12-10 16:19 被阅读0次

项目搭建前准备

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

检查 Vue 版本

vue --version
  1. 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";

相关文章

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

  • 【简单使用】Linux搭建nginx,开启前端服务

    最近项目需求,需要自己搭建nginx,配置VUE项目。由于测试环境,一个服务器需要同时搭建多个VUE项目。环境:L...

  • Vue一:Vue项目的搭建

    Vue项目的环境搭建 vue项目的搭建需要node.js环境,需要安装点击这里进入node.下载。傻瓜式安装即可;...

  • Vue(一)vue-cli搭建Vue项目

    vue项目搭建 vue项目快速搭建工具——vue-cli vue-cli是基于node环境的一个命令行工具。也就是...

  • 我的第一个Vue.js项目----仿cnode社区

    一、环境搭建 使用vue-cli脚手架搭建Vue项目 全局安装 npm install -g @vue/cli 查...

  • 从零搭建Vue项目

    1,搭建Node环境(此处就省略了,可自行百度)2,搭建Vue项目环境全局安装vue-cli(Vue脚手架):cn...

  • 【美团网项目】2.Vue基础知识

    知识点 环境搭建(如何快速搭建 Vue 环境 / 创建一个 Vue 项目) 模板语法 计算属性 类与样式 条件&列...

  • vue-cli(脚手架)搭建工作

    做一个项目开始将一些文件环境搭建好,这里vue提供了vue-cli作为项目搭建工具,在nodejs环境下进行安装,...

  • VUE全家桶

    注意:这里只讲VUE脚手架搭建的项目首先安装开发环境,vue-cli 一键搭建vue项目是基于 Node.js 所...

  • Vue前后端分离项目开发参考

    搭建项目参考 前端 前期准备 node环境 搭建脚手架 安装需要的依赖:vue全家桶(vue-cli、vue-ro...

网友评论

      本文标题:Vue 项目环境搭建

      本文链接:https://www.haomeiwen.com/subject/svylgktx.html