初始化VUE并创建项目手册

初始化VUE并创建项目手册

一、前端环境搭建

1.1 安装NodeJs

https://nodejs.org/zh-cn
下载LTS版本，下载安装完成后环境配置添加安装路径
---------------------------------------
npm config set registry https://registry.npm.taobao.org/
设置镜像仓库提升下载速度
---------------------------------------
npm config get registry
检查是否修改成功
---------------------------------------
npm config ls
查看默认配置
---------------------------------------
npm config set cache "D:\Node安装目录\node_cache"
npm config set prefix "D:\Node安装目录\node_global"
配置缓存和下载目录
---------------------------------------

1.2 安装Vue-Cli环境

npm install -g @vue/cli
或
yarn global add @vue/cli
---------------------------------------
npm list
查看已安装的模块
npm list -g
查看已安装的全局模块
---------------------------------------
npm uninstall 模块名
卸载模块
---------------------------------------

二、创建vue项目

2.1 找到存放的项目文件夹，在地址栏输入CMD打开命令窗口创建项目名文件夹。

vue create 项目名

2.2 选择模式，常用选择为Manually select features手动选择。

2.3 勾选自己的配置，空格选中，A全选，回车确认。

注：常用选择为Babel、Router、Vuex、CSS Pre-processors
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

2.4 选择VUE版本，常用选择为VUE2。

2.5 选择路由器模式是history或hash模式，常用选择为hash模式，所以输入n代表no。

2.6 选择css预处理器，常用选择less。

2.7 这些配置的模块是单独放一个文件夹，还是放在package.json文件夹里，常用选择是单独放一个文件夹里。

2.8 表示配置是否保存为预设，下次创建项目可以直接选择配置名创建，根据需要选择。

2.9 创建完成。CD进入创建的项目名文件夹，输入npm run serve或yarn serve启动项目，复制地址到浏览器访问即可。

三、调整项目

3.1 打开VSCODE，因为我用的是Prettier插件，所以在项目根目录创建.prettierrc文件配置格式化

{
  /* 单引号包含字符串 */
  "singleQuote": true,
  /* 不添加末尾分号 */
  "semi": false,
  /* 缩进大小为2 */
  "tabWidth": 2,
  /* 缩放风格为空格 */
  "useTabs": false,
  /* 在对象属性添加空格 */
  "bracketSpacing": true,
  /* 只有一个参数的箭头函数参数带空格 */
  "arrowParens": "always",
  /* 打印宽度 */
  "printWidth": 80,
  /* 最后一行不添加逗号 */
  "trailingComma": "none",
  /* 末尾空行 */
  "endOfLine": "auto"
}

3.2 安装element-ui

项目目录下输入
npm i element-ui -S
安装依赖包
---------------------------------------
找到main.js
//导入ElementUI
import ElementUI from 'element-ui'
//导入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'
//配置使用ElementUI
Vue.use(ElementUI)

3.3 删除整理自带内容

删除src/assets/logo.png
删除src/components/HelloWorld.vue
---------------------------------------
清空src/views/AboutView.vue内容
<template>
  <div class="about">

  </div>
</template>
<style lang="less"></style>
<script>
export default {
  name: 'about',
  components: {}
}
</script>
---------------------------------------
清空src/views/HomeView.vue内容
<template>
  <div class="home">

  </div>
</template>
<style lang="less"></style>
<script>
export default {
  name: 'HomeView',
  components: {}
}
</script>
---------------------------------------
在HomeView页面加载elementui启动项目看是否正常
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
---------------------------------------

四、开始项目