vue.js小记

Vue.js 结合webpack使用

工具：node,npm

下载 vue-cli工具

npm install -g vue-cli

提供两个模板：vue-webpack-simple和vue-webpack

不同之处是vue-webpack的静态文件都生成到dist目录下面，可以直接发布应用

vue-webpack-sismple模板：

vue init webpack-simple myApp

目录结构：

├─.babelrc		// babel配置文件
├─.gitignore	
├─index.html		// 主页
├─package.json		// 项目配置文件
├─README.md  
├─webpack.config.js	// webpack配置文件
├─dist			// 发布目录
│   ├─.gitkeep       
├─src			// 开发目录	
│   ├─App.vue		// App.vue组件
│   ├─main.js		// 预编译入口

vue-webpack模板：

vue init webpack myApp

目录结构：

├── 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
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── 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.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

安装依赖

npm install

运行

npm run dev

打包

npm run build

关于build之后js的路径配置，在index.js中

assetsPublicPath：'./' //当前相对路径

 

转载于:https://my.oschina.net/zx204721/blog/1052768