vue搭建/打包/上线步骤
七娃博客989人阅读
教程:
使用vue-cli创建项目
https://www.cnblogs.com/l-y-h/p/11241503.html
1.npm+node环境检测
【命令行查看版本号】 node -v npm -v 【升级npm(可选操作)】npm install -g npm 【修改为淘宝镜像(可选操作)】npm config set registry "https://registry.npm.taobao.org"
2.创建项目提示
【命令行进入该目录】 cd E:\vue\vue-demo 【下载模板】 vue init webpack vue-demo 【进入交互页面,根据自己情况选择】 ? Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。 ? Project description A Vue.js project # 项目描述,随便写 ? Author # 作者名称 ? Vue build standalone # 我选择的运行加编译时 Runtime + Compiler: recommended for most users ? Install vue-router? Yes # 是否需要 vue-router ? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范. ? Pick an ESLint preset Standard # 一样的ESlint 相关 ? Set up unit tests Yes # 是否安装单元测试 ? Pick a test runner 按需选择 # 测试模块 ? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM
3.启动项目
【命令行进入该目录】 cd E:\vue\vue-demo 【初始化项目】 npm install 【启动项目,根据package.json中的数据来启动】 npm run serve 【关闭项目】 Ctrl + C 【浏览器访问:】 http://localhost:8080/ 【项目打包上线】 npm run build 将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可(比如tomcat的webapps目录下)。
4.项目打包
将接口绑定线上域名,数据库也改成线上实际真实数据库
终端运行命令 npm run build
然后将dist的文件 拷贝到服务器根目录,将域名解析过去就行,浏览器输入域名,就可以访问了
到此算是,vue开发前端页面完成了,当然我这里涉及到了后端接口和数据库的知识,也只是皮毛而已,搞好能用的那种,我觉得还是有必要了解一下的!
评论 | 0 条评论
登录之后才可留言,前往登录