初始VUE框架 CLI

最新推荐文章于 2024-11-02 08:58:20 发布

文阳兄

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量311

点赞数

分类专栏： VUE 文章标签： vue vue.js

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/106567372

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是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项目要进行优化

把assets里面的logo删除
删除app.vue里面的数据只保留

  #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     }

删除home里面的一部分内容只保留

   <template>
            <div class="home">
            </div>
          </template>
          <script>
          export default {
            name: 'Home',
          }    </script>

然后把components里的helloworld.vue删除
然后在路由里面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')

}

然后在view文件夹里面删除about.vue文件整个文档删除
在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)