vue-cli安装使用

拼搏现实的明天。 2022-12-04 04:29 343阅读 0赞

## 方式一 ##

#### 1.安装nodejs ####

*  到nodejs官网下载nodejs
 *  windows和mac直接点击下一步用默认的安装方式即可
 *  安装完成后输入命令node --version出现版本号即表示安装成功
 *  因为安装vue-cli需要npm，这里node自带了npm
 *  查看npm版本号

//node官网
    http://nodejs.cn/
    
    //查看node是否安装成功命令
    node --version
    node -v
    
    //查看npm版本号
    npm -version
    npm -v

#### 2.安装cnpm ####

由于有些npm存在一定的问题，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像：cnpm

//安装命令
    npm install -g cnpm --registry=http://registry.npm.taobao.org

#### 3.安装vue-cli ####

cnpm install vue-cli -g

#### 4.检查安装是否成功 ####

//出现相应版本号即表示安装成功
    vue -V
    
    //出现几个带有星星的列表也表示安装成功
    vue list

//安装成功1
    C:\Users\Administrator.SC-201906041356>vue -V
    2.9.6
    
    
    //安装成功2
    C:\Users\Administrator.SC-201906041356>vue list
    
      Available official templates:
    
      ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
      ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
      ★  pwa - PWA template for vue-cli based on the webpack template
      ★  simple - The simplest possible Vue setup in a single HTML file
      ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
      ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

#### 5.找到需要存放vue目录的地方cmd后执行以下命令即可 ####

vue init webpack 项目名

安装过程中会出现以下几个提示

*  Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
 *  Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用描述
 *  Author ()： ----作者，输入作者名字可以不用写，直接回车即可
 *  接下来会让用户选择：  
    Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了  
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
 *  Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
 *  Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。  
    接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
 *  Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
 *  Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车  
    回答完毕后上图就开始构建项目了。

#### 6.初始化运行 ####

cd 当前项目
    npm install
    npm run dev

#### 7.运行成功后访问以下地址看到界面表示成功 ####

http://localhost:8080