经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
搭建VUE项目框架(2) 创建项目
来源:cnblogs  作者:搭码  时间:2021/2/18 15:31:27  对本文有异议

搭建开发环境

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

开始创建项目

  1. 打开项目的父路径

    D:\VueStudy\

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

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

    1. ## 获取模板项目
    2. ## devextreme-vue-mes 就是你项目文件夹名称
    3. npx -p devextreme-cli devextreme new vue-app devextreme-vue-mes
    4. ## 这里选Vue version (v2),然后按回车键
    5. ?What verion do you want?
    6. > Vue version (v2)
    7. vue version (v3)
    8. ## 这里选Side navigation (outer toolbar),然后回车
    9. ?What layout do you want to add?
    10. > Side navigation (outer toolbar)
    11. Side navigation (inner toolbar)
    12. ## 安装会稍微时间长一点,耐心等待
    13. ## 类似信息说明完成安装
    14. added 188 packages from 167 contributors in 50.693s
  4. 启动项目

    1. ## 用Visual Studio Code打开项目父文件夹
    2. ## 在项目路径下 [集成终端]中 输入
    3. npm run serve
    4. ## 按住Ctrl键鼠标左键 http://localhost:8080/devextreme-vue-template/
    5. - Local: http://localhost:8080/devextreme-vue-template/
    6. - Network: http://192.168.0.101:8080/devextreme-vue-template/
  5. 运行结果

配置项目

添加文件

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

  1. module.exports = {
  2. devServer: {
  3. port: 8001, // 端口号,如果端口号被占用,会自动提升1
  4. host: "localhost", //主机名, 127.0.0.1, 真机 0.0.0.0
  5. https: false, //协议
  6. open: true, //启动服务时自动打开浏览器访问
  7. proxy: {
  8. [process.env.VUE_APP_BASE_API]: {
  9. target: process.env.VUE_APP_SERVICE_URL,
  10. changeOrigin: true,
  11. pathRewrite: {
  12. ['^' + process.env.VUE_APP_BASE_API]: '',
  13. }
  14. }
  15. }
  16. },
  17. lintOnSave: false, // 关闭格式检查
  18. productionSourceMap: false, // 打包时不会生成 .map 文件,加快打包速度
  19. // filenameHashing: false, 打包时,静态文件不会生成hash值
  20. };

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

  1. # 开发模式的配置信息
  2. # 服务接口地址
  3. VUE_APP_SERVICE_URL = http://localhost:3000/api/
  4. # base api
  5. VUE_APP_BASE_API = '/dev-api'

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

  1. # 生产模式的配置信息
  2. # 服务接口地址
  3. VUE_APP_SERVICE_URL = 'http://localhost:7300/mock/5ffdc31567ed59160bfb3156'
  4. # base api
  5. VUE_APP_BASE_API = '/pro-api'

备份模板

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

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

原文链接:http://www.cnblogs.com/dm0502/p/14388675.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号