vue+webpack使用
一、vue有两种使用方式：
1.下载vue.js
<script src="vue.js"></script>
2.使用npm
npm install vue
二、在vue的mvc思想基础上，会有很多想实现的功能，可以不必原生写。比如ajax请求，各种插件。
安装vue-cli，促使这些插件可以在vue上运行。
npm install vue-cli -g
三、vue安装成功测试
cmd 中,(vue各种模板)
vue -V
vue list
四、使用vue，结合webpack开发。
从vue的角度讲，使用了模块化编写代码。
从webpack的角度讲，编译后的代码，页面全是js写的，别人看不懂，也压缩了文件大小。
五、vue+webpack简单流程操作
1、文件夹中、shift+右键，选择“在此处打开命令窗口”
vue init webpack test
test是项目名字
2、
1.项目名字，
2.项目描述，
3.项目作者，
4.使用vue什么模式，
5.是否安装vue路由，
6.是否使用eslint检查代码（建议no，严格要求es6编码），
7.不知道，
8.不知道，
3、进入项目文件夹，shift+右键，选择“在此处打开命令窗口”
npm install
此步骤就是安装package.json中预设，要装的插件。
4 、工程结构
Project Structure
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests
│ │ ├── index.js # test build entry file
│ │ ├── jest.conf.js # Config file when using Jest for unit tests
│ │ └── karma.conf.js # test runner config file when using Karma for unit tests
│ │ ├── setup.js # file that runs before Jest runs your unit tests
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
1.build，vue能进行模块化编写，就靠它配置文件
2.config，webpack能打包，就靠它配置文件
3.dist，这个是打包后才出现的文件夹。里面装的就是打包后的项目文件
4.node_modules，安装vue各种插件的地方
5.src，项目编写的地方 assets，装资源的地方，图片，字体等
components，装模块，或者网页的地方。文件均为**.vue
router，配置路由，哪个地址，分配component下的哪个网页
App.vue,本身就是个components挂在外面的index.html上。index相当于投资人，甩手掌柜，App.vue相当于职业经理人，网页的事它主管。
main.js,和主管App.vue配套的，主管js。
6.static，有它可以使用git项目版本管理
7.index.html，vue网页入口
8.package.json ,内置初始插件名称。后期再安装插件，npm i 插件名 --save ，可以保存进文件内
5、.vue可以看成是.html，都有标签代码区域，js区域，css样式区域。
又不同于.html，作用域都是独立的。所以js引用必须import导入，export导出。
6、运行项目
项目文件中，shift+右键，选择“在此处打开命令窗口”
npm run dev
npm run build
npm start
dev就是webpack的开发模式，开发模式，就是压缩文件之前
build就是项目完成后开始压缩文件，文件夹中出现dist文件夹，里面就是压缩后的项目
进入dist文件夹，shift+右键，选择“在此处打开命令窗口” （运行项目）
---------------------
作者：莱宝
来源：CSDN
原文：https://blog.csdn.net/qq_21508727/article/details/80948305
版权声明：本文为转载文章，上面是源地址！
