Javascript

全栈 Vue 笔记 ~ 项目初始化

本文主要是介绍全栈 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 笔记 ~ 项目初始化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!