全栈 Vue 笔记 ~ 项目初始化
2022/1/16 6:08:43
本文主要是介绍全栈 Vue 笔记 ~ 项目初始化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue 项目初始化
1,使用 vue-cli(脚手架)搭建项目
1)Vue-cli 是基于 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具
2)在线文档:https://github.com/vue.js/vue-cli
3)操作:
npm install -g vue-cli vue init webpack personsite cd personsite npm install npm run dev
访问:localhost:8080
2,项目结构分析
personsit |-- build:webpack 相关的配置文件夹(基本不需要修改) |-- config:webpack 相关的配置文件夹(基本不需要修改) |-- index.js:指定的后台服务的端口号和静态资源文件夹 |-- node_modules |-- src:源码文件夹 |-- main.js:应用入口 js |-- static:静态资源文件夹 |-- .babelrc: babel的配置文件 |-- .editorconfig:通过编译器的编码/格式进行一定的配置 |-- .eslintignore: eslint 检查忽略的配置 |-- .eslintrc.js: eslint检查的配置 |-- .gitignore: git版本管制忽略的配置 |-- index.html: 主页面文件 |-- package.json: 应用包配置文件 |-- README.md: 应用描述说明的 readme 文件
编码测试与打包发布项目
1)编码测试
- npm run dev
- 访问:http://localhost:8080
- 编码,自动编译打包(HMR),查看效果
2)打包发布
- npm run build
- npm install -g serve
- serve dist
- 访问:http://localhost:5000
这篇关于全栈 Vue 笔记 ~ 项目初始化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist