从零创建vue 项目，结合element ui 搭建后台管理系统

一、环境配置

1、nodejs安装

点击下载nodejs，window8以上下载最新版安装即可，可选择.msi安装包。
npm 会跟着nodejs一起安装，安装完后输入node -v 和 npm -v 检查版本。
npm升级：npm install -g npm@7.19.1

2、安装vue 工具

安装 vue-cli ： npm install -g @vue/cli
这一步如果之前已有安装则会更新已有插件包
检查是否成功安装: vue -V 可查看版本
也可以通过如下命令查看已安装的插件包：
npm list -g --depth 0
npm list -g

环境配置暂时这些，如有其他知识点，后续补全。。。

二、创建vue项目

1、使用vue ui可视化创建项目

• 输入命令 vue ui 后会打开http://localhost:8000/project/select
• 在Vue 项目管理器中创建新项目即可

2、使用vue create创建项目

• 输入vue create 项目名称
• Manually select features 手动选择要素
• 选择需要的插件包（features ），使用空格键选择
• 选择vue 版本
• 是否使用hash模式，选n
• 选择样式预处理器less/scss
• Babel、ESLint配置文件，选择专用配置文件
• 将此项目选为预设
• 如果选yes的话需要输入模板名称
  如果安装过慢，可选择yarn。

三、项目环境

1、新建vue.config.js

module.exports = {
	// ... 配置相关内容
	devServer: {
	    host: '127.0.0.1', 
	    port: 8888,
	    open: true //启动项目后自动在默认浏览器中打开路劲
	  }
} 

2、eslint配置

新版的vs code配置：
打开setting.json文件，加入如下内容：

	// 每次保存时将代码按eslint格式进行保存
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

在项目下的.eslintrc.js文件中，配置以下内容：

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'prettier/prettier': [
      // eslint校验不成功后，error或2则报错，warn或1则警告，off或0则无提示
      'error',
      {
        // 不要分号
        semi: false,
        // 设置单引号
        singleQuote: true,
        // 设置换行长度
        printWidth: 160
      }
    ]
  },

执行 npm run lint 即可格式化整个项目中的文件。

四、项目开发

1、添加插件

安装element-ui npm add element-ui -S ，其中-S表示开发和线上环境都需要的依赖包 ，安装的时候也可指定版本。