欢迎光临
我的个人博客网站

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


搭建开发环境

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

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

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

下载安装版本:Windows x64

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

安装路径:D:ProgramsVSCode

安装插件

  • 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

开始创建项目

  1. 打开项目的父路径

    D:VueStudy

  2. 在文件路径里面输入cmd命令回车,会弹出cmd窗口

    D:WebStudy> 
  3. 输入创建项目模板命令

    ## 获取模板项目 ## 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 
  4. 启动项目

    ## 用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/ 
  5. 运行结果

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

配置项目

添加文件

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文件夹

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » 搭建VUE项目框架(2) 创建项目
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏