初始VUE框架 CLI

什么是vue

vue是一套用于构建用户界面的渐进式框架与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

vue的安装与运用

1. 在搭建vue的开发环境之前首先要安装node.js(详情参考菜鸟教程的node安装){

      1.1  安装完成node后 打开docs管理工具 看是否安装成功 输入**node-v** 回车 查看安装的版本号
      
      1.2  安装cnpm(简称淘宝镜像) 的命令  因为npm的命令运行速度慢 推荐cnpm进行操作 输入**$ npm install -g cnpm --  registry=https://registry.npm.taobao.org**  进行安装
       
      1.21  如果想使用yarn命令 可以全局安装一下
      npm install -g yarn
       
      1.3 cnpm(简称淘宝镜像) 安装成功后 我们可以全局使用vue-cli脚手架,可以使用下列任一命令安装这个新的包
           npm install -g @vue/cli      使用npm命令使用这个
           yarn global add @vue/cli    使用yarn命令使用这个
验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功
   
      1.4  然后创建vue的项目 
        (找到vue.js官网->生态系统->vue cli->点击启步->找到安装->找到创建一个项目)
    如果一直创建不成功 可以window+r 输入cmd回车 试下
  • 详情去看 [vue.js官网https://cn.vuejs.org/)]

  • 1 vue create(项目名称) 创建Vue项目 项目名称不可使用中文
    出现二个选项 (1).(default(babel,eslint))默认搭建项目配置
    (2).(manally select features)自定义搭建项目配置
    使用自定义搭建项目配置(利用上下键切换选项) 选中自定义后点击 按enter确认

  • 2 然后出现一些配置选项 只选择babel router
    按空格选着选中不 按上下键选着 小括号中有星号表示选中
    确认选中后点击enter

  • 3 出现是否使用 history模式 use history mode for router
    如果项目没有说明使用history模式 则我们不使用history模式 所以选着no 然后点击enter

  • 4 接下来出现的选项选着哪个都可以 直接点击enter也可以

  • 5 接下来一直enter就可以
    最后如果出现 cd项目名称 yarn serve/npm run serve都表示项目搭建成功
    }

查看本地IP的地址

    ipconfig

搭建vue成功结构project里的内容

  • node_modules 依赖文件夹
    public{
    favicon.ion 网页标签上面的小图标
    index.html 项目的HTML文件
    }
  •       src{
              assets 存放静态文件夹 包含js css image 媒体文件 都可以放里面
              components  组件存放的文件夹 例如按钮组件 table组件
              router 主路由文件夹 里面的index.js就是主路由文件
              view  存放路由组件的文件夹
              app.vue  默认渲染的组件 最原始的组件
              main.js 项目主入口js文件
              .gitignore该文件可以设置不需要提交进入代码库的文件夹
    
          }
    
  • export导出 import导入

创建好的vue项目要进行优化

  1. 把assets里面的logo删除
  2. 删除app.vue里面的数据 只保留
  #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     }
  1. 删除home里面的一部分内容 只保留
   <template>
            <div class="home">
            </div>
          </template>
          <script>
          export default {
            name: 'Home',
          }    </script>
  1. 然后把components里的helloworld.vue删除
  2. 然后在路由里面router删除index的一些内容
    {把这一部分删除
path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

}

  1. 然后在view文件夹里面删除about.vue文件 整个文档删除
  2. 在App.js里面把
<div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </div>
```删除
9. 然后页面就干净了  然后就可以直接写你的样式了

## 启动创建Vue项目的命令

启动项目名称 yarn serve /npm run serve

启动项目名称自动打开 在package.json文件中 让vue-cli-service serve添加--open

然后在浏览器输入地址 localhost:8080

**2**.**这里是vue的简单样式**
![](https://img-blog.csdnimg.cn/2020060511560091.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhb1lhbmdTYWlk,size_16,color_FFFFFF,t_70)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值