从零开始的VUE（一）

从零开始的VUE（一）

一、前置技能

• html
• css
• js

二、介绍

vue是一个组件化的js框架，特色就是即插即用，一个vue项目每一个vue文件都可以看做是一个组件或者说标签，只需要引入然后像我们在 html 里使用 div 一样：

    <!--my-component是引入的一个组件-->
    <my-component></my-component>

三、快速开始

1、环境搭建与创建项目

1. 安装node.js 前往官网下载
2. 安装vue脚手架

   npm install -g @vue/cli
   

3. 校验是否安装成功，输出版本号代表成功了

   vue -V
   

4. 创建项目，可以选择使用webpack新建项目

   vue init webpack 【项目名】
   

   或者直接新建一个裸项目

   vue create 【项目名】
   

这边我们选择使用vue create my-test创建一个项目

第一步，出现两个选项，第一个是默认配置选择这个创建出来的项目什么也没有一些常用的包还得手动引入，第二个是手动配置，可以选择需要的包引入。此时我们选择 Manually select features。

第二步，如果你的脚手架版本够高，此时将会出现让你选择vue版本的选项，按照个人喜好选择，二者的区别将会在后续特定位置区分介绍

第三步，选择需要的包，Babel 和 Linter / Formatter 是默认选中的。其他的：

• TypeScript：增加对ts的支持，vue对ts的支持还不好暂时不考虑

• PWA support：渐进式web应用，暂不考虑

• Router：会安装vue-router包，处理路由，点击空格键勾上

• Vuex：添加状态管理，点击空格键勾上

• CSS Pre-processors：样式预处理，也就是可以选择安装sass或者scss或者less，可选可不选
  
  
  

第四步，路由模式是否选用历史模式，按自己喜好选择，这边选 y

第五步，选择一个样式预处理器，这边选择 Sass/SCSS(with node-sass)

第六步，选择ESLint配置，这边没有特殊要求选第一个，以后项目内有自定义的代码规范或者格式可以自行配置

第七步，ESLint校验时点，文件保存时校验还是提交时校验，当然是保存时校验啦，选 Lint on save

第八步，是否单独配置文件或者全塞到package.json里，选第一个

第九步，是否保存上述配置？以后再创建项目直接读取配置按照相同的配置创建，按照个人喜好选择，我选n

2、启动项目

现在项目创建好了，打开项目所在文件夹控制台执行 npm run serve就可以启动项目了

四、目录结构

• assets
  存放图片、css文件之类的资源
• components
  存放自定义的组件，一个组件一个文件
• router
  存放路由文件
• store
  项目引入vuex的话用于存放状态管理，相当于全局变量
• views
  存放页面文件，一般一个页面一个文件
• app.vue
  主页面
• main.js
  入口js
• package.json
  项目配置、引入的包管理