Vue之脚手架及第三方组件库的安装使用

2022-01-07 02:01:31 阅读：313 来源： 互联网

标签：Vue require js vue 使用组件 import 脚手架

1.vue脚手架

# 脚手架的含义：就是一个写好空模板的vue框架，我们只需填写自己的内容即可


# node的安装，官方下载，一路下一步
    -node === python
    -npm  === pip
    
# 使用npm安装第三方模块，速度慢一些，换成淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cmpm代替npm的使用


# 安装脚手架：
    cnpm install -g @vue/cli   (-g 是全局安装的意思)

# 创建vue项目
    vue create 项目名
    
    # 选择-自定义创建项目
    	-Choose Vue version  选择版本
        -Babel    语法兼容
        -Router   路由(常用)
        -Vuex     状态管理器
        选项由空格选中
        
        -选择 In.package.json

# 图形化界面创建vue项目
    vue ui

2.vue脚手架的使用

1.vue-cli项目目录介绍

mysecondvue            # 项目名
    -node_modules      # 项目的依赖包 (类似于venv文件夹)，可以删掉，给别人发一定要删除(很大，且别人没法用)
    
    -public            # 文件夹
        -favicon.ico   # 网站标题前的小图标
        -index.html    # 整个网站的index页面，单页面开发
        
    -src               # 文件夹
    	-assets        # 网站的静态文件和资源
        -components    # 一堆组件，小组件
            -HelloWorld.vue # 自定义的组件
        -router        # vue-router相关
            -index.js  # js文件(类似python的__init__)
        -store         # vuex相关(存储变量的，浅学不用了解)
        -views         # 一堆组件，页面组件
            -Home.vue  # 页面组件
        -App.vue       # 根组件
        -main.js       # 整个项目的入口 （类似settings.py）
        
   -.gitignore         # git相关，目前无用	
   -babel.config.js    # 不用管
   -package.json       # 项目依赖的包，类似于 requirments.txt
                       # 后期node_modules删除了，就依赖于这个文件安装模块 npm install 
   -README.md          # 关于项目的介绍
    
        
# 以后写代码，都在src写，其它地方一般不动

2.新建组件，使用组件

# 以后写vue的项目，就是创建组件 编写
    -每个组件都有三部分
        <template> 写html内容，原来组件的template </template>
        <script> js,data,methods,created等 </script>
        <style> 样式 </style>

# 页面组件的使用步骤
    -新建一个 xx.vue,默认生成了三部分
        -在<template>写html，学的vue的插值，指令，事件...
    	-在<script>写js，学的data，methods...
    	-在<style>中写样式，之前学的css
    
    -想访问某个路径，就能够显示这个页面组件
     在router--->index.js文件中
    	-1.导入组件
            import 起个名字 from '../views/UserDetail.vue'
    
    	-2.注册路由
            在const routes = []数组中加对象
            {
                path: '/',   # 访问的路径
                name: 'Home', # 对象名字
                component: Home  # 导入的组件对象
            }
     
        
# 小组件的使用步骤
    -新建一个 xx.vue,默认生成了三部分
        -在<template>写html，学的vue的插值，指令，事件...
    	-在<script>写js，学的data，methods...
    	-在<style scoped>中写样式，之前学的css
            # style 一般加上 scoped 属性，表示css只对当前组件生效
        
    
    -想在页面组件中使用
     在页面组件的 script标签 中
    	-1.导入：import HelloWorld from "../components/HelloWorld";
        
        -2.注册：
            export default {
                data(){},
                components:{  // 自定义了一个局部组件
                'HelloWorld':HelloWorld
                }
            }
                
        -3.使用：在页面组件的<template>中就使用这个小组件，自定义属性...

3.vue-router的使用

# 以后只需要在router---index.js中复制粘贴
    在const routes = []数组中加对象
        {
            path: '/',   # 访问的路径
            name: 'Home', # 对象名字
            component: Home  # 导入的组件对象
        }

4.导入导出语法（es6）

# 导出，新建一个js，定义变量，方法，
    -使用：export default { 对象 }
    
# 导入，在任意js中，根据路径导入
    -import utils from '../utils' //utils就是刚刚导出的对象
    # 若是名字叫 index.js  导入时到文件夹就可以了；其他名字时，就写上文件名
    
    -使用：utils.add(2,3)

// 导出
const name = 'lqz'
let age = 10
function add(a, b) {
    console.log(age)
    return a + b
}
export default {
    'name': name,
    'add': add
}

// 导入
import utils from '../utils'  // utils就是刚刚导出的对象 
let res=utils.add(1,2,)

5.bootstrap& jquery的使用

# 1 执行两条命令，安装
cnpm install jquery -S    (-S 表示对当前目录生效)
cnpm install bootstrap@3 -S

# 2 配置jQuery：在项目根路径新建 vue.config.js
    const webpack = require("webpack");
    module.exports = {
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        }
    };

# 3 配置bootstrap：在main.js中写代码
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
# 4 bootstrap使用： template中写bootstrap的样式即可
   
# 5 jQuery使用：在js中使用 jQuery的ajax      但是不要用，应该使用axios的
    $.ajax({
        url: 'http://127.0.0.1:5000/',
        type: 'get',
        success:(res)=> {
            console.log(res)
        }
    })

6.第三方组件库的使用

# web端（pc端）：elementui，iview
# 小程序，安卓：uni-app + vant(ui组件库)

# elementui的使用
参考 官方文档：https://element.eleme.cn/#/zh-CN

# 1.安装
cnpm install element-ui -S

# 2.完整引入 (也可以只引入部分组件)
在 main.js 中写入以下内容：
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);

7.axios的使用

# 1 安装
cnpm install axios -S

# 2 直接使用
import http from 'axios'
http.get().then(res=>{})

8.关于静态文件的引入

8.1 require形式引入

<template>
  <div style="margin:100px">
    <div>
      <img :src="cat"  alt="猫咪">       // 图片src
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cat: require('../assets/images/cat.jpg'),   // require转换一下图片地址
    }
  }
}
</script>

# 注意：require编译可能找到对应的图片地址

let url = "@/assets/images/logo.png"
require(url)    //报错

let url = "logo.png"
require("@/assets/images/" + url); //正确

# 故尽可能详细的指定 require 中的路径，然后拼接静态资源文件名变量

8.2 import形式引入

1. import引入图片
2. data中注册一下引入的图片名称
3. 模板中直接引用名称

<template>
  <div style="margin:100px">
    <div>
      <img :src="cute" alt="小可爱">  // img地址
    </div>
  </div>
</template>

<script>
import cute from '../assets/images/cute.jpg'   // import引入

export default {
  data () {
    return {
      cute             // data中注册图片
    }
  }
}
</script>

标签：Vue,require,js,vue,使用,组件,import,脚手架
来源： https://www.cnblogs.com/Edmondhui/p/15773517.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9