vue-cli 新建项目

新建Vue项目

安装Vue cli检查其版本

在任一文件夹下

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 

用这个命令来检查其版本是否正确：

vue --version

 

出现版本号表示安装成功(如下)

D:\a实训\代码\webpack-study>vue --version
@vue/cli 5.0.4

 

创建项目

新建文件夹在此文件夹内用Vue创建项目

D:\a实训\代码\webpack-study>cd ../
​
D:\a实训\代码>mkdir vue-cli-study
​
D:\a实训\代码>cd  vue-cli-study
​
D:\a实训\代码\vue-cli-study>vue create hello-world
​

 

出现项目选项（用方向键移动选项 空格选择 回车确定）

1.? Please pick a preset: Manually select features
   在Please pick a preset内选择Manually select features
​
2.? Check the features needed for your project: Babel
  在Check the features needed for your project内至少选择Babel
​
3.? Choose a version of Vue.js that you want to start the project with 3.x
   Vue版本选择3
​
4.? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  package.json内 内容足够多选择另外的文件保存（In dedicated config files）
​
5.? Save this as a preset for future projects? No
  输入n不保存这次配置

使用vuex、router、less插件时要在选择Babel后选择

 

 

 

 

下载完成后出现两行命令输入命令

 $ cd hello-world
 $ npm run serve

 

输入命令后出现网址新建项目完成！

​

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.232.121.222:8080/

 

​