新建一个vue项目的整个流程-CSDN博客

目标:新建一个vue项目,名字叫vuedemo02

一.先看看这两张图片,作为重要参考,然后我们再正式开始

$ vue init webpack project--------------------- 安装vue脚手架的命令，采用webpack打包工具，项目名是project
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------项目名称
? Project name project
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author wujy--------------------- 项目创建者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，推荐安装，是页面跳转用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no，因为这里有很多的坑，具体以后会讲
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安装单元测试，因人而异，可以自行选择
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安装e2e测试，可自行选择
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 这里说明如何启动这个服务
cd project   --------------------进入项目文件夹
npm install   ---------------------安装依赖，推荐使用淘宝镜像cnpm
npm run dev  -----------------------项目运行复制代码

二.正式开始

vue-cli已经安装好了(可以cmd里输入vue-cli -v查看是否已经安装),所以直接开始第二步的初始化项目

打开cmd,或者powershell

2. 我要在哪个文件夹下新建,就cd到那里.

(1)cd E:\myVueProject

(2)cd E:

3.初始化一个vue项目:输入vue init webpack vuedemo02

 Project name vuedemo02
	? Project description A Vue.js project
	? 
Author
	? Vue build standalone
	? Install vue-router
? Yes
	? Use ESLint to lint your code? No(这里注意选no) 
 ? Set up unit tests No 
 ? Setup e2e tests with Nightwatch? No 
 ? Should we run `npm install` for you after the project has been created
? (recommended) no (这里注意,选择最后一项表示自己手动安装依赖) 
复制代码

4.安装依赖npm install

(1)cmd进入vuedimo02: cd E:\myVueProject

(2)npm install

5.启动项目npm run dev

安装好了依赖之后,npm run dev

就可以了