使用 vue-cli(脚手架)搭建项目

一、使用 vue-cli(脚手架)搭建项目

1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具

2) 在线文档:https://github.com/vuejs/vue-cli

3) 操作: (mypro 是自定义名称)

npm install -g vue-cli 

vue init webpack mypro

cd mypro

npm install npm run dev

访问: localhost:

二、项目结构分析

mypro

|-- 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

上一篇:1.vue脚手架搭建项目


下一篇:.NET Core部署到linux(CentOS)最全解决方案,进阶篇(Supervisor+Nginx)