ゼロからのプロジェクト開発環境VUEの完全なセットを開発します

あなたが仕事や余分なポイントをインタビューする必要があるかどうか、VUE技術スタックは、フロントエンドの開発エンジニアが技術的なポイントが必要となっています。次に、私は彼らの見直しを容易にするために、後でまた見に小さなパートナーを必要とするピアを提供し、ゼロVUEプロジェクト開発環境の完全なセットを開発します。

ブロックチェーン

倉庫住所

プロジェクトソースアドレスします。https://github.com/tangmengcheng/my-vue-cli.git

目標

Vueが完全で、私たちはこれらの事を行う公式の足場CLIヘルプを初期化webpack4.xの私たちはどのような共通の特徴を完成ヘルプ:

  1. ES6 / 7/8/9および他のハイレベルシンタックスは、ES5に変換しました
  2. スタイラス/以下/ SCSSプリプロセッサ他のCSSのCSSに変換
  3. 解析フォント、フォント、画像(jpg、pngなど)やその他の静的リソース
  4. 圧縮JS、CSSファイルなど
  5. 主要なブラウザは接頭辞をベンダーCSSを自動的に追加します
  6. 環境変数を定義します。
  7. 引き出された共通のコード
  8. プロジェクトのアップデートとホット遅延ロード
  9. 本番環境と開発環境の違い
  10. すべてのパックはパッケージ化され記録された最後の削除します
  11. ...

プロジェクトの初期化

  1. ノード構成の環境を確認してください

まずローカルのグローバルインストールしたノード環境、VUEの操作はに依存して達成するための管理ツール、ノードをダウンロードダウンロードが良いノード、オープンCMD管理ツール、入力された後、入力して、ビューのノードのバージョン番号、バージョン番号は、インストールが成功した表示されますnodenpmnode -v

node -v  npm -v

レンダリング

  1. プロジェクトディレクトリを初期化します

ターンでは、コマンドラインを入力します。

mkdir my-vue-cli 新建项目目录
cd my-vue-cli/ 切换到项目目录
npm init 生成项目的一些信息,最终会生成一个package.json文件。注意:可以输入npm init -y可以不用按回车

レンダリング

  1. インストールのWebPACK

WebPACKのは、パッカーモジュールで、モジュールは自動的にプロジェクトの依存関係および高度な文法を解析し、解析することができますいくつかの他のブラウザでは、ブラウザに直接変換することはできませんJSCSSのファイルを。あなたのローカルインストールのプロジェクトのルートディレクトリでのWebPACK、プロジェクトが使用するwebpack4.xバージョンを

npm install webpack webpack-cli -D

レンダリング

  1. 初期プロジェクトのディレクトリとファイル

プロジェクトファイルのルートディレクトリに新しい外観:

src: 存放项目源码的目录
index.js: 需要被 webpack 编译的文件
build:存放项目的 webpack 配置文件
webpack.config.js 项目的webpack核心配置文件
index.html: 项目打包后自动将打包的文件添加在该文件里面

レンダリング

  • 添加webpack配置文件的基本信息
  1. mode: 模式, development开发环境、production生产环境
  2. entry: 项目的打包的入口文件
  3. output: 项目的打包后输出文件
  4. module: 模块, 在webpack中所有文件皆模块, 解析css、js、图片以及字体图标等
  5. plugins: 插件, 用来扩展webpack功能
  • 在package.json文件 scripts 属性中添加 运行 npm run build 即可打包
"build": "webpack --config ./build/webpack.config.js"
  • 在index.js中添加测试代码验证webpack打包是否正确
function sum(a, b) {
    return a + b;
}
var sum = sum(1, 2)
console.log(sum)

如果项目dist目录生成了一个bundle.js文件,说明webpack打包正确.
レンダリング

配置核心功能

  1. ES6/7/8/9等高级语法转换成ES5
  • 在index.js中添加ES6/7/8等高级语法的代码测试代码验证webpack是否能将其转换为ES5等让浏览器能够解析的低级语法
  1. 安装相关依赖
    npm install babel-loader @babel/core @babel/preset-env -D
    
    babel-loader是将ES6等高级语法转换为能让浏览器能够解析的低级语法
    @babel/core是babel的核心模块,编译器。提供转换的API
    @babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5
  1. 修改核心配置文件webpack.config.js
    レンダリング
    然后运行npm run build,就可以看到我们输入的ES6+等高级语法被转换为ES5了。注意:babel-loader只会将 ES6/7/8等高级语法转换为ES5语法,但是对新api并不会转换。比如Promise、Iterator、Set、Proxy、Symbol等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。此时,我们必须使用babel-polyfill,为当前环境提供一个垫片。
    npm install @babel/polyfill -S
    
    babel-polyfill是解决babel-loader不能对新的api进行转换为当前环境添加一个垫片

重点:当我们执行打包后,打包的文件里含有大量的重复代码,那么我们需要提供统一的模块化的helper来减少这些helper函数的重复输出。

    npm install @babel/runtime @babel/plugin-transform-runtime -D
    
    @babel/runtime就是提供统一的模块化的helper, 使用能大大减少打包编译后的体积
    @babel/plugin-transform-runtime它会帮我自动动态require @babel/runtime中的内容
    注意:还有一些常见的babel:
    @babel/plugin-proposal-decorators将es6+中更高级的特性转化---装饰器
    @babel/plugin-proposal-class-properties将es6中更高级的API进行转化---类

レンダリング
3. 在index.js中编写ES6+等高级语法

    let fn = () => {
        console.log('箭头函数')
    }
    fn()
    
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(123)
        }, 1000)
    })
    promise.then(res => {
        console.log(res);
    })

レンダリング

  1. stylus/less/scss等css预处理器转换成css
  • 在项目src目录中添加index.less文件,并在index.js文件中引入其文件

以下就以less预处理器为例,详细介绍下其用法,其余两种类似:

  1. 安装相关依赖
    npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader -D
    
    css-loader主要的作用是解析css文件, 像@import等动态语法
    style-loader主要的作用是解析的css文件渲染到html的style标签内
    stylus、less、sass是CSS的常见预处理器
    stylus-loader、less-loader、sass-loader主要是将其对应的语法转换成css语法
  1. 修改核心配置文件webpack.config.js
    レンダリング
  2. 添加index.less文件
    @color: red;
    #div1 {
        color: @color;
        font-size: 36px;
    }

レンダリング
注意:CSS3 的许多特性来说,需要添加各种浏览器兼容前缀,开发过程中,这样加太麻烦,postcss 帮你自动添加各种浏览器前缀

    npm install postcss-loader autoprefixer -D
    
    postcss-loader autoprefixer 处理浏览器兼容,自动为CSS3的某些属性添加前缀

レンダリング

  1. 解析字体font、图片(jpg、png…)等静态资源
  • 项目中通常会使用图片、字体等静态资源,不使用对应的loader项目会报错
  1. 安装相关依赖
    npm install file-loader url-loader -D
    
    file-loader可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片。打包的图片会给每张图片都生成一个随机的hash值作为图片的名字
    url-loader封装了file-loader,它的工作原理:1.文件大小小于limit参数,url-loader将会把文件转为Base64;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader
  1. 修改核心配置文件webpack.config.js
    レンダリング
  1. 压缩打包后的js、css
  • 由于项目打包后会生成很多js文件,代码之间有很多空格、引号等,如果我们将其去掉,这样会大大减少打包的体积
  1. 安装相关依赖
    npm install mini-css-extract-plugin -D
    // or 或
    npm install extract-text-webpack-plugin@next -D // 不推荐使用
    npm install optimize-css-assets-webpack-plugin -D
    npm install uglifyjs-webpack-plugin -D
    // 扩展 消除未使用的css
    npm install purify-webpack purify-css -D

注意:在生产模式下,webpack自动将JS进行压缩。MiniCssExtractPlugin 推荐只用于生产环境,因为该插件在开发环境下会导致HMR功能缺失,所以日常开发中,还是用style-loader。
2. 修改核心配置文件webpack.config.js
レンダリング

  1. 常用选项以及插件的使用方法
  • 大家都习惯的Ctrl+S保存代码后就想浏览器自动刷新来更新我们的页面
  1. 安装相关依赖
    npm install webpack-dev-server -D
  1. 修改核心配置文件webpack.config.js
    レンダリング
  • 通过html-webpack-plugin插件来创建html文件,并自动引入打包后的js文件
  1. 安装相关依赖
    npm install html-webpack-plugin -D
    
    html-webpack-plugin主要有两个作用: 1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题。2、可以生成创建html入口文件
  1. 在项目根目录新建index.html文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
  1. 修改核心配置文件webpack.config.js
    レンダリング
  • 通过clean-webpack-plugin插件来自动删除上一次打包的文件
  1. 安装相关依赖
    npm install clean-webpack-plugin -D
    
    clean-webpack-plugin是删除webpack打包后的文件夹以及文件
  1. 修改核心配置文件webpack.config.js
    レンダリング

webpack识别.vue文件

目前绝大多数的vue项目里核心业务代码都是.vue文件结尾的,但浏览器不支持对.vue文件的解析,故需webpack将.vue文件转换为浏览器能识别的js文件。

  1. 安装相关依赖
    npm install vue-loader vue-template-compiler cache-loader thread-loader -D
    npm install vue -S
    
    vue-loader 作用解析.vue文件
    vue-template-compiler 作用编译模板
    cache-loader 作用缓存loader编译的结果
    thread-loader 作用使用 worker 池来运行loader,每个 worker 都是一个 node.js 进程
    vue 一个用于构建用户界面渐进式的MVVM框架
  1. 修改核心配置文件webpack.config.js
    レンダリング

  2. 在项目根目录新建App.vue文件

    <template>
        <div>
            测试123
        </div>
    </template>
    <script>
    export default {
        
    }
    </script>
  1. 修改index.js
    import Vue from 'vue';
    import App from './App.vue';
    
    new Vue({
        render: h => h(App)
    }).$mount('#app')

実行により、NPMの実行ビルドは上記の操作の後、あなたはWebPACKの.vueのjsファイルの解析文法ブラウザが認識できる見ることができます。また、NPM実行DEVを実行して、123をレンダリングするブラウザのページで見ることができます。

Vueの統合VueRouterとVuex

  1. その依存関係をインストールします。
    npm install vue-router vuex -S
    
    vue-router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌
    vuex是一个专为 Vue.js 应用程序开发的状态管理模式
  1. 統合されたVUE-ルータ
  • 新Home.vueとAbout.vue二つの成分
    // Home.vue
    <template>
        <div>
            home1231
        </div>
    </template>
    <script>
    export default {
        name: 'Home'
    }
    </script>
    <style lang="scss" scoped>
    </style>
    // About.vue
    <template>
        <div>
            about
        </div>
    </template>
    <script>
    export default {
        name: 'About'
    }
    </script>
    <style lang="scss" scoped>
    </style>
  • コンフィギュレーションファイルのルーティング、新規
    プロジェクトのsrcディレクトリで、新しい/src/router/index.jsを。注:ルートをロードするときに、遅延ロードローディングアセンブリをルーティング使用することができ
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    // import Home from '../views/Home.vue';
    // import About from '../views/About.vue';
    Vue.use(VueRouter); // 向Vue再注册路由
    export default new VueRouter({
        mode: 'hash',
        routes: [
            {
                path: '/Home',
                name: 'Home',
                // component: Home
                component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') // 路由懒加载方式
            },
            {
                path: '/about',
                name: 'About',
                // component: About
                component: () => import(/* webpackChunkName: 'About' */ '../views/About.vue')
            },
            {
                path: '*', // 匹配任何路由
                redirect: '/Home'
            }
        ]
    })
  • ファイルを変更しindex.js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    new Vue({
      router, // 新增
      render: h => h(App)
    }).$mount('#app')

スプレッド

  • 要素UIの導入
  • 管理システムを追加し、共通のレイアウト(上記の左と右のナビゲーションレイアウト+)
  • ...
  • 遂に

あなたがこの記事をかなり良いと思うなら、私はオハイオ州のようなポイントを覚えています!

参加を歓迎、一緒にフロントを学び、一緒に進行!
CMD-値下げ - ロゴ

公開された11元の記事 ウォン称賛27 ビュー785

おすすめ

転載: blog.csdn.net/qq_40588413/article/details/104242508