前端-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阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339