node-vue多页面开发配置

• C:\Program Files\nodejs
  cnpm
  一个使用nrm切换到淘宝的镜像，安装模块由于是国外网站网速特别慢

nrm

image.png

https://github.com/Pana/nrm
npm

image.png

关于数据mock

• yarn是对node模块进行管理的工具

  
  
  

  image.png

yarn快速，可靠

image.png

vue本地安装的形式：

• 1.jquery老项目维护，事件紧或者重构工作量大
• 2.后台管理界面（没有前后端分离，交互复杂的界面处理）vue和jquery混用

vue-cli脚手架工具

安装

yarn global add vue-cli

vue init templateName projectName
vue init webpack maijia

选择第一个

image.png

vue-router 路由，需要安装

image.png

build config 文件都是关于webpack的配置
src 项目的开发目录
static 放静态文件
.babelrc babel的配置
.editorconfig 编辑的配置
.gitignore git的忽略配置
README整个项目的说明

yarn 运行yarn，会多一个node_module文件夹，里面放置的是node的模块
而且会多一个yarn.lock文件

"postcss-loader": "^2.0.8",
依赖模块，这个模块依赖于postcss

官方给的是一个单页面应用

package.json 
scripts :命令
npm dev 在开发环境下运行这个项目的dev-server.js
"devDependencies"开发依赖模块

npm run dev
=>修改src ->components
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to xxxx'
    }
  }
}
npm run build 运行打包的命令
打包以后，项目文件下多一个dist文件夹

build文件夹下有一个
webpack.base.conf.js
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

webpack.prod.conf.js
new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',

 new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',

基于vue-cli搭建一个多页面应用

• 目录结构的调整
• webpack配置调整
  项目调整

• 将index.html,放到开发目录里src

  
  
  

  image.png
• pages 里面是index文件

• index里面文件，main.js变成index.js，因为我们需要一个入口文件对应一个模板文件，名称要一致，一致，打包以后，后面配置的时候，能够一致

  
  
  

  image.png
• webpack配置
  build=> webpack.base.conf.js
  入口只有一个

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js' //名称和路径
  },

基于vue-cli搭建一个多页面应用

• 在build/utils.js添加两个方法：webpack多入口文件和多页面输出

var HtmlWebpackPlugin = require('html-webpack-plugin') //后面配置里，每个页面要单独打包生成一个页面的插件
var PAGE_PATH = path.resolve(__dirname, '../src/pages')//设置读取的一个路径
var merge = require('webpack-merge') //对webpack page进行合并的一个模块

minify: {
          removeComments: true, //要不要移除注释
          collapseWhitespace: true,//要不要去掉空格
          removeAttributeQuotes: true //去掉属性里的双引号
        },

image.png

• 开发环境下，注释页面模板

  
  
  

  image.png

• 注释new html ，webpack.dev开发环境

  
  
  

  webpack

• webpack-prod

  
  
  

  image.png
  
  
  

  image.png

npm run build 打包，此时打包dist文件会多一个cart.html文件

做效果，去github找插件，会有很详尽的api