01 - Vue 前端工程创建

简介 :

从今天就慢慢开始了自己项目搭建了, 还不知道会做成什么样的效果, 不过可以期待一下, 会尽自己最大努力去完成这个项目的

一 , 新建 SPA 项目

• 项目前端为一个 SPA 的单页面应用

• single page application 单页面应用, 整个项目只存在一个页面

二 , 项目开始前准备, Vue 版本选择

2 . 1 说在创建项目前, 这也是 Vue 给我的第一个下马威

• 现在最新的 Vue - Cli 是 4.x 的版本了, 所以安装 4.0 以上版本的小伙伴要注意了, 因为我使用前端框架是 Element - UI , 但是 Element - UI 最新版本还没有完成 4.x 版本以上的整合, 所以引入的时候就会报错, 欲知详情, 请听下回讲解
• 所以在这里建议小伙伴, 前端框架选择 Element - UI 的不要使用最新的, 使用 3.6.0 版本的脚手架就可以啦, 当然相信很多前端框架选择应该都没有整合好 Vue-Cli 4.x, 所以还是不要选择最新的版本啦

2 . 2 上面既然说了版本问题, 那既然是不可避免会遇到的问题, 接下来就介绍一下版本相关

• vue -cli 卸载

  npm uninstall -g vue-cli
  

• vue - cli 查看版本

  • vue -V
  • vue --version

• vue - cli 版本升降

  • vue-cli 2

    npm install -g vue-cli@版本号
    

  • vue-cli 3 / cli 4

    npm install -g vue-cli@版本号
    npm install -g vue-cli@3.6.0   //当前最建议安装的版本
    

  • 如果想熊掌与鱼兼得, 那么就可以选择 vue 的桥接工具

    npm install -g @vue/cli-init
    

• 新建 Vue 项目

  • vue-cli 2

    vue init webpack ProjectName
    

  • vue-cli 3 / cli 4

    • cmd 命令行创建

    vue create ProjectName
    

    • vue ui 视图创建

• 讲在最后

  • 也许你在 npm uninstall -g vue-cli 删除版本时会遇到卸载报错的问题, 但是不要紧张, 将报错中出现的文件路径 .bin 中所有文件删除, 然后再执行 npm uninstall -g vue-cli 就可以啦

3 . 新建 Vue 工程

我选择的是使用 cmd 命令行新建项目

1. 新建工程
   

2. 选择配置, 默认配置/手动选择特性, 我们当然选择手动配置啦
   

3. 接下来就是选择配置啦, 建议暂时不要选择 Linter / Formatter, 因为刚刚开始码代码时会出现很多空格或格式错误, 导致编译失败, 所以等熟悉后再使用吧
   

4. 是否使用历史路由, 选择否
   

5. 选择 CSS 预处理器
   

6. 你需要吧你的配置文件放在哪里, 单独的配置文件 或者 package.json 中这里都可以选, 但是以后找配置文件的时候要找对地方就可以啦

7. 是否需要将刚刚选择的配置保存到自定义的选择中, 可供下次选择, 这里就选择不保存啦, 多配置一下熟能生巧
   

8. 项目开始创建, 到这里就结束啦
   

9. 新建项目到这里就完成了, 下面来介绍一下 vue 的工程吧

4 . Vue 项目解析

4 . 1 Vue 目录解析

这里介绍一下目录文件下各个文件的大体作用, 如果你使用 的 Vue-cli 可能与我的不同, 选的配置也会有区别, 所以文件可能存在小的区别, 但是不用担心, 影响不大, 大体作用还是可以看出来的

4 . 2 Vue 工程运行解析

• index.html 是单页面的主程序入口
• main.js 是单页面的 js 文件, 声明了 vue 实例, 作为 root 组件, 并挂载了 app
• APP.vue 声明的是 main.js 中挂载的 app 的组件, 并在 div 中声明路由, 可通过路由访问不同的页面, 实现了单个页面, 多个跳转的效果
• router.index.js 声明了全局路由, 注册视图, 然后声明路由
• views :　视图　vue 文件

-以上就是运行的基本逻辑啦

• 今天已经结束啦, 改日再来