02.vue安装

1. vue核心概念

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官方文档:http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

2. vue.js安装

2.1 安装node.js环境(npm包管理工具)

node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了

安装完成之后,进入命令行窗口,输入node -v命令,查看node的版本

2.2 安装vue-cli脚手架构建工具(必须在全局中进行安装)

  1. 在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

  2. 是否安装成功:vue -V

2.3 切换国内镜像源

  1. 使用cnpm

    • 由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
    • 在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
  2. 将npm切换为淘宝镜像源

    npm set registry https://registry.npm.taobao.org
    指定源
    
    npm config list
    查看npm信息
    
    npm install npm -g
    升级npm
    
  3. 如果出现任何关于node依赖的问题导致服务无法启动,执行npm install无法解决的,则安装rimraf,然后进入项目目录下,执行rimraf node_modules 删除后,重新执行 npm install 安装依赖

    删除node_modules
    
    npm install rimraf -g
    
    rimraf node_modules
    

2.4 创建vue项目

# 1. 初始化项目
vue init webpack vue01  # 在文件夹对应的cmd窗口使用, 输完回车

# 2. 接下来选择配置项目信息
? Project name (vue01)  #项目名称 默认回车即可
? Project description (A Vue.js project)  # 项目描述 默认回车即可
? Author   # 作者  默认回车即可

? Vue build (Use arrow keys)    # 打包项目选项 默认回车即可
? Install vue-router? (Y/n)   # 是否安装路由  输入y
? Use ESLint to lint your code? (Y/n)  # 是否使用eslint检测代码, 输入n
? Set up unit tests (Y/n)   # 是否使用测试单元    输入 n
? Setup e2e tests with Nightwatch?  #   输入n
? Should we run `npm install` for you after the project has been created? (recommended)
    ❯ Yes, use NPM  # 是否使用npm包管理工具
    Yes, use Yarn  # 是否使用yarn包管理工具
    No, I will handle that myself  # 不,我使用我自己的工具,想使用cnpm选第三个选项

# 3. 进入项目文件夹,在终端安装必备的包
cd vue01  # 首先进入项目文件夹
npm install  # 如果上面选的是第三个选项, 这一步是必须的,使用cnpm工具,安装一些必备的项目包, 
            # 如果上面选的是npm,这一步没必要,当然多运行一遍,也没问题

# 4. 在终端运行项目
npm run dev  # 两个命令任意一个即可,启动项目
posted @ 2020-10-26 21:21  远山渡月  阅读(118)  评论(0编辑  收藏  举报