搭建VUE项目框架(2) 创建项目 / 开普饭

搭建开发环境

Node.js官方地址：https://nodejs.org/zh-cn/

下载安装版本：14.15.4长期支持版(LTS)

Visual Studio Code官网地址：https://code.visualstudio.com/

下载安装版本：Windows x64

省略安装步骤了，注意的一点就是安装路径最好修改一下

安装路径：D:\Programs\VSCode

安装插件

Chinese (Simplified) Language Pack for Visual Studio Code
Auto Rename Tag
Element UI Snippets
HTML CSS Support
Live Server
Node Snippets
open in browser
Path Intellisense
Vetur
Vue 2 Snippets

开始创建项目

打开项目的父路径

D:\VueStudy\
在文件路径里面输入cmd命令回车，会弹出cmd窗口
```
D:\WebStudy>
```

输入创建项目模板命令

## 获取模板项目
## devextreme-vue-mes 就是你项目文件夹名称
npx -p devextreme-cli devextreme new vue-app devextreme-vue-mes

## 这里选Vue version (v2)，然后按回车键
?What verion do you want?
> Vue version (v2)
  vue version (v3)
## 这里选Side navigation (outer toolbar)，然后回车
?What layout do you want to add?
> Side navigation (outer toolbar)
  Side navigation (inner toolbar)
## 安装会稍微时间长一点，耐心等待
## 类似信息说明完成安装
added 188 packages from 167 contributors in 50.693s

启动项目

## 用Visual Studio Code打开项目父文件夹
## 在项目路径下 [集成终端]中 输入
npm run serve

## 按住Ctrl键鼠标左键 http://localhost:8080/devextreme-vue-template/
  - Local:   http://localhost:8080/devextreme-vue-template/
  - Network: http://192.168.0.101:8080/devextreme-vue-template/

运行结果

配置项目

添加文件

vue.config.js：项目文件夹的根目录上添加

module.exports = {
  devServer: {
    port: 8001, // 端口号，如果端口号被占用，会自动提升1
    host: "localhost", //主机名， 127.0.0.1，  真机 0.0.0.0
    https: false, //协议
    open: true, //启动服务时自动打开浏览器访问
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_SERVICE_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        }

      }
    }
},

lintOnSave: false, // 关闭格式检查
productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
// filenameHashing: false, 打包时，静态文件不会生成hash值
};

.env.development:项目文件夹的根目录上添加

# 开发模式的配置信息
# 服务接口地址
VUE_APP_SERVICE_URL = http://localhost:3000/api/

# base api
VUE_APP_BASE_API = '/dev-api'

.env.production:项目文件夹的根目录上添加

# 生产模式的配置信息
# 服务接口地址
VUE_APP_SERVICE_URL = 'http://localhost:7300/mock/5ffdc31567ed59160bfb3156'

# base api
VUE_APP_BASE_API = '/pro-api'

备份模板

项目模板文件夹：VueTemplate文件夹

做好项目模板之后，我们要把项目模板存起来，以后可以继续用

搭建VUE项目框架(2) 创建项目

搭建开发环境

开始创建项目

配置项目

添加文件

备份模板

相关推荐