首页 > 其他分享> 文章详细

vue---创建vue项目，项目目录结构，es6导入导出，但也没组件写法，vue-router路由使用，vue中使用bookstrap，jquery和elementui

2022-06-30 18:05:23 阅读：141 来源： 互联网

标签：jquery es6 vue index 项目 js 组件 router

创建vue项目

第一步：安装node

地址：http://nodejs.cn/download/，一路下一步，加入环境变量

-node ：等同于 python
-npm ：等同于 pip

第二步：安装脚手架

补充：使用npm 安装第三方模块，速度比较慢，使用国内镜像

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 以后使用cnpm代替npm，速度快

cmd命令：cnpm install -g @vue/cli

-等同于pip install djagno ，释放出djagnoadmin可执行文件

-释放出vue可执行文件

第三步：创建vue项目

-第一种：使用命令行

命令：vue create 项目名，步骤如下图

选择自定义模式

配置一下选项，上下键选择，空格确定状态，回车保存。

选择vue版本，这里我们选择vue2.0

选择package.json，里面存放了依赖包和配置

vue项目目录结构

myfirstvue            # 项目名字
    -node_modules     # 有很多小文件，该项目的依赖，项目传给别人，这个文件夹要删掉，如果这个文件夹没有， npm install 生成，并且装好该项目的依赖
    -public           #文件夹
        -favicon.ico  # 网站顶部小图标
        -index.html   # 单页面开发，整个项目就这一个html
    -src              #文件夹，内容重要，以后咱们代码主要在这写，组件，js，css。。
        assets        #公共图片，js，css，都可以放在这里
        components    #小组件，放在页面组件中使用的小组件， xx.vue
        store         # 安装了vuex，就会生成，下面有个index.js
        router        # 安装了vue-router，就会生成，下面有个index.js
        views         # 页面组件，放了一个个页面组件
        App.vue       # 根组件
        main.js       # 整个项目的入口
    .gitignore        # git版本管理忽略文件
    babel.config.js   # babel的配置，不用管
    jsconfig.json
    package.json      # 项目的配置，和依赖模块都在这
    package-lock.json
    README.md         # 项目的介绍
    vue.config.js     # vue的配置信息
    
    
 # 重点是src文件夹下的所有东西，后期写的多

es6导入导出语法

在一个js中使用另一个js中得代码(变量，函数)

每个模块中，只允许使用唯一的一次export default，否则会报错

导出

export default 对象

导入

import 起个名字  from 'js文件'
import {add} from './common'

js创建包，包下可以写一个index.js 等同于 python的__init__,导入的时候，只要导到包这一层即可

单页面组件写法

组件化开发，写vue的组件，vue项目中一个文件就是一个组件：单文件组件。

以后，咱们就是写 xx.vue 单文件组件，有三部分：

#第一部分：html内容
        <template>
        </template>
# 第二部分：js内容
        <script>
        </script>
#第三部分：css样式
        <style>
    	</style>

案例

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{ name }} is handsome</h1>
    <button @click="handleClick">点我看美女</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      name: '李清照'
    }
  },
  methods: {
    handleClick() {
      alert('美女')
    }
  }

}
</script>

<style scoped>   只在当前组件中生效
h1{
  background-color: pink;
  font-size: 90px;
}


</style>

vue-router路由使用

第三方插件vue-router，实现组件间的切换。

使用步骤

-第一步：根组件中写：App.vue

<template>
          <div id="app">
            <router-view/>
          </div>
        </template>

第二步：配置路由--》router-->index.js中配置--》这样配好，在浏览器输入order，就看到OrderView这个组件了，写了新页面组件后，在index.js中配置

const routes = [
            {
            path: '/order',
            name: 'order',
            component: OrderView,
          }
        ]

第三步：在页面中有个按钮，点击，跳转到某个组件上

-方式一：在html中写
        <router-link :to="toUrl"><button @click="handleClick">订单</button></router-link>
-方式二：在js中写
        this.$router.push('/')
        -不能跳转第三方路径

vue项目中使用bootstrap，jquery，elementui

elementui

ui组件库：elementui,可以快速构建出好看的页面。

使用elementui步骤：

-第一步:安装

    ```js
    cnpm i element-ui -S  
    // -S表示安装到当前项目下，并添加到依赖中，package.json
    ```

-第二步：在main.js中配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

-第三步：去官网，复制，粘贴，调整大小即可

bootstrap和jq