Vue4（vue-cli脚手架和webpack）

时间：2021-06-19 18:51:18 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：ima webpack install 淘宝基于 function 控制方式 log

获取原生的DOM的方式

技术图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../vue-router.js"></script>
<script src="../vue.js"></script>

<div id="app">

</div>

<div></div>

<script>

    Vue.component(‘Test‘, {
        data() {
            return {}
        },
        template: `<div>我是测试组件</div>
`
    });


    let App = {
        data() {
            return {}
        },
        template: `
           <div ref="abc">
           <Test ref="zzz"></Test>
</div>

        `,
        mounted() {
            // console.log(this.$refs);
            // console.log(this.$refs.abc);
            // console.log(this.$refs.zzz);
            //  console.log(this.$refs.zzz.$parent);
            //  console.log(this.$refs.zzz.$root);  //找到Vue实例对象
             // console.log(this.$refs.zzz.$children)
        }
    };
    new Vue({
        el: ‘#app‘,
        data() {
            return {}
        },
        components: {
            App
        },
        template:`
            <App></App>
        `

    })
</script>

</body>
</html>

refs属性

refs示例

查看电脑上node.js 和 npm 是否存在

技术图片

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Vue-cli

npm install -g @vue/cli

拉取2.x模板(旧版本)

npm install -g @vue/cli-init

查看vue-cli版本

vue -V

vue-cli的使用

1.webpack-simple(简单版)

vue init webpack-simple my_project //my-project是自定义项目名

在pycharm执行后,一路回车,sass不会就选no,接下来cd my_project中

//切换到创建的项目目录后
cnpm install

启动

npm run dev

下载vue-router到项目中

cnpm i vue-router -S
cnpm i vue-router@2 -S //下载指定版本

配置

　　新建一个js文件,完成以下步骤,可以参考下图

1.导入vue　
  
2.导入vue-router   

3.Vue.use(())

4.实例化vue-router对象

5.配置路由信息vue

6.创建组件.vue文件

7.导出export 这个vue-router对象

8.main.js 导入这个文件

9.挂载

10.使用router-link 和router-view

技术图片

Home.vue文件示例

技术图片

main.js导入挂载

技术图片

App.vue中使用router-link 和router-view

　技术图片

css中scoped

scoped是Vue给我们提供的,因为App.vue的style是全局的,我只需要在style加上scoped,style就只对当前模板有效,变为局部的

技术图片

2. webpack(完善版)

vue init webpack my_project //my-project是自定义项目名

在pycharm执行后,可以不选择npm下载,接下来cd my_project中,使用cnpm下载

技术图片

下载

cnpm install

运行

npm run dev

局部组件变为全局组件

技术图片

导入和导出

技术图片

webpack

技术图片

.Vue

技术图片

安装webpack

npm i webpack@3.12.0 -g

webpack打包编译

首先新建App.js,main.js,index.html三个文件,然后在官网下载一个vue.js文件

main.js导入Vue 和 App 两个组件

import Vue from  ‘./vue.js‘
import  App  from ‘./App.js‘
new  Vue({
    el:‘#app‘,
    data(){
        return{
        }
    },
    template:`
    <App/>
    `,
    components:{
        App
    }
});

main.js

let App={
    template:`
    <div>我是App组件</div>
    `
};
export default App;

App.js

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

</div>
<script src="bund.js"></script>


</body>
</html>

index.html

打包

webpack ./main.js ./bund.js       //bund.js 自定义的文件名

以上的方法需要每次在Terminal 控制台输出,下面我们使用webpack模块

`webpack模块使用`

1. node.js 安装

2. npm init -yes 默认生成一个package.json文件 (管理整个项目中的包)

3. cnpm i webpack@3.12.0 -D (下载当前开发环境的依赖)

安装成功后使用下面命令就可以完成打包编译

npm run dev

执行npm run dev 相当于把package.json的scripts我们自定义的‘webpack ./main.js ./bundle.js ‘执行了

下面的写法基于上面的优化解耦

1.新建webpack.config.js文件

当然我们还可以加上watch 监听以后,一旦代码编码改动自动编译(适用于开发环境)

我们这里自定义2个配置文件,一个适用于开发,一个适用生产

对package.json进行简单修改配置

技术图片

开发执行　　npm run dev

生产环境　　npm run build

webpack中loader和plugin

下面我们把css文件也加入到我们打包文件中

1.新建index.css文件

2.main.js 进行导入

3.下载并配置loader

npm i css-loader style-loader -D

4.在我们自定义2个配置文件webpack.config.js中配置loaders

技术图片

优化打包目录结构

技术图片

webpack-plugin插件的使用

1.下载

cnpm i html-webpack-plugin --save-dev   // --save-dev 相当于 -D

2.在我们自定义2个配置文件webpack.config.js中配置plugins

技术图片

单文件引入

　　解析.vue文件

下载包

npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D

创建一个App.vue文件,文件结构如下:

main.js修改

技术图片

webpack.conf的配置

技术图片

搭建脚手架

　　实现单页面应用

在这里我们就不能在vue.js和vue-router.js了,我们需要直接下载到项目依赖上

cnpm i vue vue-router -S

下载完成后在package.json看下是否存在

main.js的修改

技术图片

App.vue 使用router-link 和 router-view

技术图片

然后可以npm run dev 了,但是每次都要手动输入,下面有更牛逼的方法

webpack-dev-server

前端中的服务器,功能强大,帮我们实现很多自动化操作

1.下载

npm install webpack-dev-server@2 --save-dev

常用的配置参数

package.json配置

　　其实配置了一个node.js服务器

技术图片

Vue4（vue-cli脚手架和webpack）

标签：ima webpack install 淘宝基于 function 控制方式 log

原文地址：https://www.cnblogs.com/ouyangjintao/p/14901404.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

Vue4（vue-cli脚手架和webpack）

获取原生的DOM的方式

vue-cli的使用

1.webpack-simple(简单版)

配置

Home.vue文件示例

main.js导入挂载

App.vue中使用router-link 和router-view

css中scoped

2. webpack(完善版)

在pycharm执行后,可以不选择npm下载,接下来cd my_project中,使用cnpm下载

下载

运行

局部组件变为全局组件

导入和导出

webpack

.Vue

安装webpack

webpack打包编译

首先新建App.js,main.js,index.html三个文件,然后在官网下载一个vue.js文件

webpack模块使用

1. node.js 安装

2. npm init -yes 默认生成一个package.json文件 (管理整个项目中的包)

3. cnpm i webpack@3.12.0 -D (下载当前开发环境的依赖)

安装成功后使用下面命令就可以完成打包编译

执行npm run dev 相当于把package.json的scripts我们自定义的‘webpack ./main.js ./bundle.js ‘执行了

下面的写法基于上面的优化解耦

1.新建webpack.config.js文件

当然我们还可以加上watch 监听以后,一旦代码编码改动自动编译(适用于开发环境)

我们这里自定义2个配置文件,一个适用于开发,一个适用生产

对package.json进行简单修改配置

开发执行 npm run dev

生产环境 npm run build

webpack中loader和plugin

下面我们把css文件也加入到我们打包文件中

1.新建index.css文件

2.main.js 进行导入

3.下载并配置loader

优化打包目录结构

webpack-plugin插件的使用

单文件引入

下载包

创建一个App.vue文件,文件结构如下:

main.js修改

搭建脚手架

下载完成后在package.json看下是否存在

main.js的修改

App.vue 使用router-link 和 router-view

然后可以npm run dev 了,但是每次都要手动输入,下面有更牛逼的方法

webpack-dev-server

前端中的服务器,功能强大,帮我们实现很多自动化操作

1.下载

常用的配置参数

package.json配置

其实配置了一个node.js服务器

`webpack模块使用`

开发执行　　npm run dev

生产环境　　npm run build

　　其实配置了一个node.js服务器