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

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

目录

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 介绍：

vue中文介绍
vue官方介绍

1.2 vue语法介绍：

Template Syntax（官方文档）
模板语法（中文文档）

1.3 vue项目构建学习文档

vue项目构建与实战
使用Vue快速开发单页应用－主体结构
webpack+vue+vueRouter模块化构建完整项目实例超详细步骤（附截图、代码、入门篇）
关于自己配置有关webpack.config.js和vue项目搭建相关步骤

2.构建项目

2.1 vue-cli脚手架构建项目

  使用vue-cli脚手架可以自动生成vue项目的基础目录文件，使用代码如下：

//使用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）
  1. 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"]
            }
        ]
    }
}
  1. 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"]
            }
        ]
    }
}
  1. 图片 字体 打包
    图片需要的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"]
             }
         ]
     }
 }
  1. 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"]
                }
            ]
        }
    }
  1. 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文件中。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 162,825评论 4赞 377
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,887评论 2赞 308
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 112,425评论 0赞 255
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,801评论 0赞 224
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 53,252评论 3赞 299
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 41,089评论 1赞 226
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,216评论 2赞 322
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 31,005评论 0赞 215
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,747评论 1赞 250
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,883评论 2赞 255
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,354评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,694评论 3赞 265
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,406评论 3赞 246
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,222评论 0赞 9
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,996评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,242评论 2赞 287
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 36,017评论 2赞 281