Vue-cli使用方法

最新推荐文章于 2024-08-16 19:53:07 发布

Mr.Wangzh

最新推荐文章于 2024-08-16 19:53:07 发布

阅读量428

点赞数

文章标签： vue.js jquery bootstrap

本文链接：https://blog.csdn.net/weixin_45570784/article/details/108885300

版权

Vue.js 脚手架使用方法

1、编写规范

1.1 js文件的编写格式

这句话的意思是使用 vue 文件样式进行渲染 html 中的 div 属性或者其属性

import dd from './dd.vue'

mian.js写调用组件（入口文件），dd是html文件中定义的“div”中的 id 或者 class 名。

new Vue({
  render: h => h(dd)
}).$mount('#dd')

里面主要写渲染文件
new Vue({
  
})

1.2 Vue文件编写格式

template用于编写当前组件的结构代码
script 编写当前组件业务代码
style 写样式代码块

1.3 Vue小组件模块编写

Vue可以分为小组件和大组件两种，意思就是把一张网页作为大组件，里面的内容做为小组件，可以在主方法中任意调用，修改便利
小组件编写方式

先在 components 中新建一个子组件，在组件的根中编写代码如

<p>我是及第一个子组件</p>

然后回到父组件在 script 业务代码模块中导入子组件：

用 import one from './components/one';‘one’是建立的vue文件，
‘ ’这里面放的是组件路径

最后回到父组件中的 template 模块，把子组件放进去：子组件写法跟div写法一样。

注意点: 默认情况下组件中的style中设置的样式是全局的样式，子组件设置父组件也会受到影响，所以要想不受到影响可以以下写法:

//里面加上 scoped
<style scoped>

</style>

1.3 共享数据(项目中使用vuex)

在store目录下创建一个.js文件。首先导入Vuex文件

import Vuex from‘vue’

import Vuex from‘vuex’

Vue.use(Vuex)

const  store =  new Vuex.store(options:{
  state:{
    //里面存储全局的共享数据
  }
})

然后把Vuex文件暴露出去

export default store
//注意store只是一个命名可以改成需要的变量

再去入口文件中导入文件

import store from './store/.js'

// 直接把命名的文件store：store添加到 new Vue中
new Vue({
  store：store，
})

子、父组件中获取共享数据写法：

getName() {
        console.log(this.$store.state.name)
    }

测试脚手架版本号

vue --version查询的是vue-cli的版本,也就是vue脚手架的版本

1.4 使用Vue-router

2、引入 Element

2.1 完整引入

npm i element-ui -S

在 main.js 中写入以下内容：

import Vue from 'vue';

//这部分是导入ElementUI包
import ElementUI from 'element-ui';
//找到文件下的element-ui样式组件
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

//这部分是主要引用的
Vue.use(ElementUI);

//下面这部分是默认存在的
new Vue({
  el: '#app',
  render: h => h(App)
});

3、引入 Bootstrap3

3.1 npm安装
安装命令如下：

//默认安装最新版本
cnpm install bootstrap
//安装 bootstrap 的 V3 版本（依赖 less）
cnpm install bootstrap@3

3.2 main.js全局引入 bootsrap

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';

3.3 如果会报错：因为bootstrap会依赖jquery以及Popper.js

4、引入 jQuery

4.1 安装jquery以及Popper

//方式1
npm install --save jquery popper.js

//方式2 引入bootstrap前要引入jquery
cnpm i jquery -S

5、vue注册了组件未使用报错：component has been registered but not used

报这个错误是因为eslint代码检查到你注册了组件但没有使用，然后就报错了，我们只需要将注册了却未使用的组件取消注册即可。但是我们有时候我们不想取消注册，希望也能编译通过，该怎么处理呢？

有两种方式：

1.修改项目的package.json
在package.json中找到eslintConfig下的rules，增加"vue/no-unused-components": "off"即可：

"eslintConfig": {
  "rules": {
    "vue/no-unused-components": "off"
  }
}

2.如果项目中有eslintrc.js文件，在该js模块中找到rules，增加上"vue/no-unused-components": “off”

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "vue/no-unused-components": "off"
}

这两种使用其中任意一种都可以，如果两个文件都修改了的话，eslintrc.js文件的优先级较高。