创建vue项目,使用vue-cli搭建项目脚手架

一、vue-cli介绍

vue-cli是一个脚手架工具,它集成了诸多前端技术,包括但不仅限于:

1、webpack

2、babel

3、eslint

4、http-proxy-middleware

5、typescript

6、css pre-prosessor

7、css module

这些工具,他们大部分都有依赖两个东西:

1、node环境:很多工具的运行环境

2、npm:包管理器,用于下载各种第三方库

二、安装node

下载node: https://nodejs.org/zh-cn/

验证安装

node -v
npm -v

配置源地址

默认情况下,npm安装包时会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置npm的源地址

使用下面的命令更改npm的源地址为淘宝源

npm config set registry https://registry.npm.taobao.org

更改之后,查看源地址是否正确被修改

npm config get registry

三、 安装vue-cli

npm install -g @vue/cli

安装好之后,检查vue-cli是否安装成功

vue --version

vue-cli的使用

在终端中进入某个目录

选择一个目录,改目录将放置你的工程文件夹

搭建工程

vue create 工程名

注意:工程名只能出现英文、数字和短横线

安装依赖

工程搭建好后,在终端中进入工程目录

cd 工程名
npm i
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset:
  default (babel, eslint)
> Manually select features                                                                                          
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel --兼容性配置
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  
 
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json    

Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
  Use Yarn
> Use NPM    

运行

 npm run serve

你可能感兴趣的:(前端,vue.js)