徒手撸个vue项目框架（上）

时间 2019-11-24

标签徒手 vue 项目框架繁體版

原文原文链接

写这篇文章的目的，更可能是让本身更熟悉vue-cli脚手架建立项目的依据和项目结构，其次是但愿个人学习过程能够帮到有疑惑的同窗，有什么错误还但愿能够获得指教css

为何要分上、下，由于最近学习react.js，发现项目框架除了使用的js库不一样（vue.js、react.js），配置基本上是大同小异的html

这也是我占坑（脸大）的理由vue

徒手撸个vue项目框架（上）

徒手撸个vue项目框架（下）

徒手撸个react项目框架（上）

徒手撸个react项目框架（下）

1、准备工做

1.新建vueProject文件夹

进入根目录,初始化项目node

cd vueProject

npm init -y // -y是采用默认配置
复制代码

此时目录出现package.json文件react

2.建立项目结构

在根目录下新建src文件夹，在src下暂时新建名为index的js文件做为入口文件webpack

根目录下建立一个index.html,做为入口页面web

3.使用webpack

下载webpack时你可能会出现无限下载webpack-cli的问题，这是由于你没有先全局安装webpack和webpack-cli的缘由vue-router

// webpack4.X开始webpack-cli被提出来做为一个独立的包了
// 在下载webpack同时也要下载webpack-cli,且必须同时下载不然会报错，由于版本不匹配
cnpm install webpack-cli webpack --save-dev
复制代码

webpack默认只能打包js模块，它能够将你写的多个js模块打包成一个js文件，最后在入口页面引入它vue-cli

webpack4开始默认大于配置，换句话说能够不用再引入一个配置文件来打包项目，所以他有不少默认值npm

默认入口文件是src下的index.js，输出为dist目录下的main.js（假如没有dist目录会自动建立）

可是它仍然是高配置的，假如须要咱们只需在项目根目录下新建webpack.config.js来进行一切的配置

相比于webpack4以前的版本，它的配置项多出一个mode选项，可选值为"development" 或 "production"（默认），它们的区别就是development打包输出的文件不是压缩版本的

4.使用vue.js

cnpm install vue@2 --save-dev
复制代码

index.js中

// index.js
import Vue from 'vue'

new Vue({
    el: '#app',
    msg: 'hello vue'
})
复制代码

index.html中

//  index.html
<div id ="app">{{msg}}</div>
复制代码

使用webpack打包，将打包后的文件引入页面，打开浏览器运行，此时会报以下警告

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
复制代码

这是由于vue有两种构建版本的代码：完整版和只包含运行时版，完整版是包含编译器和运行时

解决方案多种多样的，官方作法是给vue设置别名

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"  // 这里根据你使用的版本引入vue/dist 下对应的版本就行
    }
  }
};
复制代码

添加如上配置打包后，刷新浏览器，能够正常显示msg的值了

这里准备工做已经完成了，可是功能太捉急了，因此接下来就是webpack的施展才华的时候了

2、完善框架功能

1.使用webpack-dev-server

每次写完新的内容要想看到效果，就必须使用webpack进行打包，咱们更但愿当代码改变时自动打包编译

webpack-dev-server能够帮咱们作到！

a.下载

cnpm i webpack-dev-server --save-dev
复制代码

b.使用

假如像使用webpack命令同样使用使用webpack-dev-server是局部安装的，使用局部安装的包，是彻底行不通的，由于命令行里只能使用全局安装的包， webpack-dev-server是局部安装的，使用局部安装的包，咱们须要使用在package.json中配置scripts

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
},
复制代码

而后再命令行使用npm run dev

npm run dev
复制代码

注意看下面的节选的代码

npm run dev

> vueproject@1.0.0 dev C:\myProject\vueProject
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\myProject\vueProject
i ｢wdm｣: Hash: e70fb3ae9bf074915cad
Version: webpack 4.35.0
复制代码

从这里咱们知道两件事：首先，咱们的项目运行在本机8080端口，其次webpack的output输出在根目录下,因此记得修改index.htmlmain.js的路径，不然你是看不到新的效果的

可是咱们在根目录下并无看到这个文件，这是由于它被放在内存中（这样的读写速度快），而不是磁盘中，另外咱们还能够修改端口，甚至能够在编译完成后自动打开浏览器

它具体的配置能够是在webpack的devServer项

devServer:{
    host: '127.0.0.1',
    port: 8080,
    open: true
}
复制代码

也能够是在cli里，这是最暴力的方式，可是端口仍是放在devServer里，方便之后项目的配置

// package.json
"scripts": {
    "dev": "webpack-dev-server --open --port 30000"
},
复制代码

2.使用html-webpack-plugin

既然将main.js放在内存中能够加快读写速度，那是否是把页面放在内存中能够进一步加快读写速度了？

答案是确定的！使用html-webpack-plugin就能够作到

a.下载

cnpm i html-webpack-plugin --save-dev
复制代码

b.使用

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./index.html"),
      filename: "index.html"
    })
  ],
复制代码

上面的代码是根据磁盘中的index.html在内存中生成一个index.html，咱们在浏览器中审查页面发现会多一个script标签，这是插件自动将内存中的main.js加入到内存页面中了，因此咱们这是应该删除手动添加的script标签

// index.html
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <!--删除或者注释掉 <script src="./main.js"></script> -->
</body>
复制代码

3、继续完善框架（项目）功能

到目前为止框架已经能够本身监听改变做出反应了，可是就vue自己来讲仍是很简陋的，它尚未有组件功能，也没法编译样式，等等。前面说过，webpack默认是只能处理js文件的，可是loader使得webpack能够处理更多类型的文件。接下来使用loader继续完善它

1. 组件功能vue-loader

组件功能是vue特有的生态vue-loader，官网中能够看到，它配合vue-template-compiler，将组件中的html、js、css单独提出来交给相应的loader处理

a.下载

两个loader都须要下载

cnpm i vue-loader vue-template-compiler --save-dev
复制代码

b.使用

在webpack.config.js中

module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },
复制代码

若是仅是如此设置，浏览器啊会报错

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
复制代码

这是由于vue-loader和别的loader不同，他必需要有一个插件支持，这个插件在./node_modules/vue-loader/lib/plugin下，官网给出示例：

const VueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin");

  module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },
  plugins: [
    ...
    new VueLoaderPlugin(),
    ...
  ],
复制代码

2.处理样式

处理样式使用的是css-loader和style-loader

a.下载

cnpm i css-loader style-loader -save-dev
复制代码

b.使用

module: {
    rules: [
        ...
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  },
复制代码

可是项目中咱们可能使用less或sass等写样式，道理是同样的，它也有本身的loader

a.下载

cnpm i less-loader -save-dev
复制代码

b.使用

module: {
    rules: [
        ...
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
    ]
  },
复制代码

3.处理图片

.test{
    background-image: url(../imgs/11.jpg);
}
复制代码

当咱们在组件的style中使用url()会报错，由于vue-loader没法处理url，这时就须要使用url-loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
复制代码

a.下载

url-loader内部使用了file-loader，因此两个loader要同时下载

cnpm i url-loader file-loader --save-dev
复制代码

b.使用

基本的使用以下

module: {
    rules: [
        ...
        { test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader" } // 包括字体、视频格式
    ]
  },
复制代码

c.options

细心的同窗会发现，虽然图片能够显示了可是审查元素时发现,图片的名称和路径变化了，这是由于url-loader会将图片编译到内存中，而且给它设定一个哈西值做为身份标识，当第二次用到这个文件时直接调用它，而不是在次编译

通常它后面能够放一个options对象，能够控制当图片的l字节大小大于limit属性时触发某些指望的设置

module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 8000,    // 当文件字节大小超过限定值时触发后面的设置
            name: "[hash:8]-[name].[ext]"  // 这是在原先的名称和后缀名前加了八位的哈希码
          }
        }
      }
    ]
  },
复制代码

4、结语

目前基本的功能都有了，可是仍是不够完美，下期将会引入vue-router，而且使用UI框架，对业务进行一些封装，但愿能够帮助到你，谢谢阅读到这的你，有问题能够及时告诉我，我立马改正