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

喜欢ヅ旅行 2022-10-04 15:55 216阅读 0赞

## 一、环境配置 ##

### 1、nodejs安装 ###

[点击下载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表示开发和线上环境都需要的依赖包 ，安装的时候也可指定版本。

[nodejs]: http://nodejs.cn/download/