[JavaScript知识库]全栈 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