Vue-CLI 项目搭建

0829自我总结

Vue-CLI 项目搭建

一.环境安装

• 安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
#路径最好要修改用默认就好

• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
#这个东西主要用来换源否则你后面下载会很慢,全部的npm均可以用npm来代替

• 安装脚手架

cnpm install -g @vue/cli
或者
npm install -g @vue/cli

• 清空缓存处理

npm cache clean --force
#在前面这个安装的时候安装老是失败的状况下能够尝试清下缓存接着安装

二.项目的建立

• 建立项目

vue create 项目名
// 要提早进入目标目录(项目应该建立在哪一个目录下)
// 选择自定义方式建立项目，选取Router, Vuex插件
//这里面呢回车别按太快,空格是勾选,回车是下一步

• 建立项目中的选项简介

  #第一次出现的选项
  default (babel, eslint)
  Manually select features #通常不选默认设置

  • default为系统默认
  • Manually select features为自定义

  #第二次出现
  #空格勾选,回车下一步
  (*) Babel    #咱们在VUe中通常都用ES6语法写的,这个插件功能很强大通常都选的把ES5语法解析成ES6       
  ( ) TypeScript      #也是种语法js的升级版,脸书蛮推荐这个语法的,学这个蛮贵的
  ( ) Progressive Web App (PWA) Support #前台优化的一个功能集合,提升前台项目效率
  (*) Router #先后端交互中ajax交互来达成先后端分离,这个就是前台的路由
  (*) Vuex #Vue中父组件与子子组件传递消息,设置成全局的单例来方便消息传递
  ( ) CSS Pre-processors #若是选了后面他会让你选你用less或者sass中其中某个作预处理
  (*) Linter / Formatter  #规范编码格式
  ( ) Unit Testing  #测试相关
  ( ) E2E Testing     #测试相关
  #通常勾选这四个,其它具体状况具体分析

  后面就一直回车就行了,最后结束时候选择'N

• 启动/中止项目

npm run serve //运行
ctrl+c   //退出
// 要提早进入项目根目录

• 打包项目

目录结构

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有能够本身新建)

若是别人须要拷贝项目只须要拷贝src便可其它不须要拷过去,拷过去也不必定生效,

要从新安装一下依赖npm install

项目目录结构

|vue-proj
|   |src
|   |   |components  小组件
|   |   |   |Nav.vue
|   |   |views  页面组件
|   |   |   |PageFirst.vue
|   |   |   |PageSecond.vue
|   |   |App.vue  根组件
|   |   |router.js  安装vue-router插件的脚本文件 - 配置路由的

• README的解读

# my_vue

## Project setup
​```
npm install  #安装环境依赖
​```

### Compiles and hot-reloads for development
​```
npm run serve #启动项目
​```

### Compiles and minifies for production
​```
npm run build #项目打包
​```

### Run your tests
​```
npm run test #运行测试脚本
​```

### Lints and fixes files
​```
npm run lint #执行代码规范检测
​```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).