前端-vue框架学习笔记(一)-项目构建

作者: Sol_elY | 来源:发表于2018-03-12 16:26 被阅读0次

环境：vue-cli+webstorm/vue+webstorm

//使用npm全局安装vue-cli；(vue -V)(1.在安装vue-cli时，已经自带安装webpack。)
npm install -g vue-cli  
//生成项目模板（1.webpack是模板名称，这里我们需要使用webpack的打包功能，所以使用webpack；2.projectname是项目名称）
vue init webpack projectname
cd my-project
npm install
npm run dev

执行上面命令后，我们将生成下面的文件结构，并开一个服务，其自动生成的基础文件如下：

├── build // webpack/node配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config // 环境配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件
├── src // 静态资源文件
│   ├── assets            
│   │    └── logo.png
│   ├── components  
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .eslintignore // eslintrc忽略文件
├── .eslintrc.js // 管理和检测js代码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
└── README.md // 描述文件

这样的构建方式其实并不适用于所有项目，很多文件项目可能都不会用到，并且如果对自动生成的文件一无所知，那么后期维护起来也会非常的吃力。所以不推荐新手使用vue-cli构建，而是推荐大家参考vue-cli生成的文件从零开始构建一个vue项目。
想要了解自动生成的webpack文件配置，可以参考这篇文章：vue-cli中的webpack配置

2.2 自定义构建项目

相比vue-cli构建，自定义构建就显得灵活得多，但是它需要了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步：

文件/文件夹创建
package.json文件创建
webpack配置文件创建
入口文件创建
vue组件编写
路由配置

2.2.1 文件/文件夹创建

文件创建

按照上方的图示，需要从零开始创建以上文件和文件夹，每一个文件都有其自己的用途。

2.2.2 webpack.config.js文件配置和相关依赖包安装

使用npm init -y命令可以快速的创建一个package.json文件。

Webpack的配置和使用
npm install --save-dev webpack
使用时，先在package.json的script标签中添加一条命令（就和全局的命令一模一样）然后通过npm run 命令名 来执行命令
webpack使用

webpack.config.js设置：
基础配置项

var path = require("path") 
module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    }
}

使用webpack打包别的类型的文件
webpack默认支持的文件类型，只有js文件，如果在项目中出现了其他类型的文件，那么webpack本身是无法进行处理的，所以我们需要为每一个类型的文件，单独指定一个加载器（loader）

css
在webpack的项目中，如果要使用css文件，我们可以将css文件当做一个模块，使用import的方式引入到js当中，最终webpack会将css文件中的内容，一起打包到最终的js文件中，也可以在页面中生效。要打包css文件，就需要给css文件配置loader，需要两个loader： style-loader css-loader
安装相应的loader：
npm install --save-dev style-loader css-loader
在webpack.config.js中配置css文件对应的loader：

var path = require("path") 
module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

less sass
less需要的loader: style-loader css-loader less-loader 依赖项： less
sass需要的loader: style-loader css-loader sass-loader 依赖项： node-sass
安装相应的loader:

npm install --save-dev less-loader less 
npm install --save-dev sass-loader node-sass

webpack.config.js配置加载器

var path = require("path")
module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module属性中就可以进行loader的配置
    module: {
        rules: [
           {
                test: /\.css$/,
                //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                use: ["style-loader", "css-loader"]
            },
            {
               //less文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                //sass文件
                test:  /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
}

图片字体打包
图片需要的loader: url-loader 依赖项： file-loader
字体需要的loader: url-loader
安装相应的loader:
npm install --save-dev url-loader file-loader
webpack.config.js配置加载器

var path = require("path")
module.exports = {
     entry: path.join(__dirname, "入口文件路径"),
     output: {
         path: path.join(__dirname, "dist"),
         filename: "bundel.js"
     },
     //module属性中就可以进行loader的配置
     module: {
         rules: [
             {
                 test: /\.css$/,
                 //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                 use: ["style-loader", "css-loader"]
             },
             {
                 //less文件
                 test: /\.less$/,
                 use: ["style-loader", "css-loader", "less-loader"]
             },
             {
                 //sass文件
                 test:  /\.sass$/,
                 use: ["style-loader", "css-loader", "sass-loader"]
             },
             {
                 //图片文件
                 test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                 use: [{
                     loader: "url-loader",
                     options: {
                //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
                         limit: 1024 * 50
                     }
                 }]
             },
             {
                 //字体文件
                 test: /\.(woff|woff2|eot|ttf)$/,
                 use: ["url-loader"]
             }
         ]
     }
 }

ES6 代码打包和babel-cli的使用
用到的loader: babel-loader 依赖项： babel-core
用到转码规则： babel-preset-env
安装相应的loader:

npm install --save-dev babel-loader babel-core 
npm install babel-cli -g
npm install babel-preset-env

webpack.config.js配置加载器
创建一个.babelrc 用来指定转码的规则

     {
         presets: [
             "env"
         ]
     }

webpack.config.js配置加载器

    var path = require("path") 
    module.exports = {
        entry: path.join(__dirname, "入口文件路径"),
        output: {
            path: path.join(__dirname, "dist"),
            filename: "bundel.js"
        },
        //module属性中就可以进行loader的配置
        module: {
            rules: [
                {
                    test: /\.css$/,
                    //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
                    use: ["style-loader", "css-loader"]
                },
                {
                    //less文件
                    test: /\.less$/,
                    use: ["style-loader", "css-loader", "less-loader"]
                },
                {
                    //sass文件
                    test:  /\.sass$/,
                    use: ["style-loader", "css-loader", "sass-loader"]
                },
                {
                    //图片文件
                    test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                    use: [{
                        loader: "url-loader",
                        options: {
                            //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
                            limit: 1024 * 50
                        }
                    }]
                },
                {
                    //字体文件
                    test: /\.(woff|woff2|eot|ttf)$/,
                    use: ["url-loader"]
                },
                {
                    //ES6
                    test: /\.js$/,
                    //排除node_modules中的内容
                    exclude: /node_modules/,
                    use: ["babel-loader"]
                }
            ]
        }
    }

html-webpack-plugin的使用
作用：将src目录下的index.html作为模板，每次在打包的时候，都会将其复制到dist目录下，并且自动为其引入bundle.js
安装相应的loader:
npm install --save-dev html-webpack-plugin
webpack.config.js配置

var HtmlWebpackPlugin = require("html-webpack-plugin")
var path = require("path")
module.exports = {
    entry: path.join(__dirname, "入口文件路径"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src/index.html")
        })
    ]
}

webpack-dev-server的使用
如果没有这个东西，那么每次在修改代码之后，都需要重新进行打包，才能看到效果！
webpack-dev-server可以启动一个简易的http服务器，当代码发生改变的时候，实时的进行打包并且刷新页面显示效果！这个东西只会打包更新了的内容，并不会将整个项目完整的打包，所以效率会比较高，而且它打包的内容都是直接放在内存里面的，所以访问速率也会非常快。
安装:
npm install --save-dev webpack-dev-server
使用:
直接给命令传参
webpack-dev-server --port 9000 --contentBase ./src --hot
在webpack.config.js中进行配置

var path = require("path");   
 //如果使用webpack.config方式进行配置，那么必须有这个包引入
var webpack = reuqire("webpack");
module.exports = {
       entry: path.join(__dirname, "入口文件路径"),
       output: {
           path: path.join(__dirname, "dist"),
           filename: "bundel.js"
        },
        devServer: {
            port: 9999,
            contentBase: "./src",
            hot: true
       },
        plugins:[
            //这边是给dev-server设置一个插件，如果没有这个插件则热更新会报错
            new webpack.HotModuleReplacementPlugin()
        ]
}

由于在之前已经在package.json文件的script中进行了配置，所以我们可以直接用npm来执行命令。

2.2.3 入口文件创建、vue组件编写与路由配置

routes.js文件放路由配置文件；

import Vue from 'vue' // 引入vue
import Router from 'vue-router'  // 引入路由
Vue.use(Router) // 注册路由
import Index from '../views/index.vue'  // 引入编写的组件

export default new Router({
    mode: 'hash',
    routes: [
        { 
            path: '/', 
            name: 'index', 
            component: Index,
        },
        { path: '*', redirect: '/' },
    ]
})

index.html首页入口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

App.vue是项目入口文件，是我们的主组件，所有页面都是在App.vue下进行切换的。

<template>
  <div id="app">
    ...  //组件
  </div>
</template>
<script>
...//组件调用
export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
    ... //组件
  },
}
</script>
<style>
#app {
...  //全局样式
}
</style>

main.js这是项目的核心文件。全局的配置都在这个文件里面配置，初始化vue实例并使用需要的插件。

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import './assets/styles/base.css'
Vue.config.debug = true;//开启错误提示

new Vue({
        router,
        el: '#app',
        ...
})

commponents目录里面放公共组件，views文件放详情页面。
单文件组件就是将组件相关的内容（HTML JS CSS）全部放到了一个.vue文件当中。

<template>
     <div>
         //这里就是组件的html部分也就是所谓的模板
     </div>
 </template> 
 <script>
  export default {
        data(){},
        filters: {},
       components: {},
       watch: {},
       directives: {},
       created(){}
   }
</script>
 // scoped属性标志着这个style标签中的css样式是只对当前组件有效！
 <style scoped>
 </style>

3 拓展

3.1 `--save-dev`与`--save`

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，
--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。

3.2 css-loader 和 style-loader

css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

前端-vue框架学习笔记(一)-项目构建

目录

1.学习文档

1.1 介绍

1.2 vue语法介绍

1.3 vue项目构建学习文档

2.构建项目

2.1 vue-cli脚手架构建项目

2.2 自定义构建项目

2.2.1 文件/文件夹创建

2.2.2 webpack.config.js文件配置和相关依赖包安装

2.2.3 入口文件创建、vue组件编写与路由配置

3 拓展

3.1 `--save-dev`与`--save`

3.2 css-loader 和 style-loader

1.学习文档

1.1 介绍：

1.2 vue语法介绍：

1.3 vue项目构建学习文档

2.构建项目

2.1 vue-cli脚手架构建项目

2.2 自定义构建项目

2.2.1 文件/文件夹创建

2.2.2 webpack.config.js文件配置和相关依赖包安装

2.2.3 入口文件创建、vue组件编写与路由配置

3 拓展

3.1 `--save-dev`与`--save`

3.2 css-loader 和 style-loader

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端-vue框架学习笔记(一)-项目构建

目录

1.学习文档

1.1 介绍

1.2 vue语法介绍

1.3 vue项目构建学习文档

2.构建项目

2.1 vue-cli脚手架构建项目

2.2 自定义构建项目

2.2.1 文件/文件夹创建

2.2.2 webpack.config.js文件配置和相关依赖包安装

2.2.3 入口文件创建、vue组件编写与路由配置

3 拓展

3.1 --save-dev与--save

3.2 css-loader 和 style-loader

1.学习文档

1.1 介绍：

1.2 vue语法介绍：

1.3 vue项目构建学习文档

2.构建项目

2.1 vue-cli脚手架构建项目

2.2 自定义构建项目

2.2.1 文件/文件夹创建

2.2.2 webpack.config.js文件配置和相关依赖包安装

2.2.3 入口文件创建、vue组件编写与路由配置

3 拓展

3.1 --save-dev与--save

3.2 css-loader 和 style-loader

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3.1 `--save-dev`与`--save`

3.1 `--save-dev`与`--save`