Vue框架项目实战整理：7、Vue项目搭建：使用vue-cli（vue脚手架）快速搭建项目——回顾快速版

87 阅读 0 评论 58 点赞

我是靠谱客的博主漂亮冷风，最近开发中收集的这篇文章主要介绍Vue框架项目实战整理：7、Vue项目搭建：使用vue-cli（vue脚手架）快速搭建项目——回顾快速版，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、查看 vue命令是否可用

设置使用指定版本的node

再次查看 vue命令是否可用

2、创建项目模板

3、执行 npm install 命令

4、npm run start 启动项目

1、查看 vue命令是否可用

$ vue
bash: vue: command not found

记得之前 vue-cli脚手架构建工具，都是安装好的。

Vue框架项目实战整理：2、Vue项目环境搭建（有图有真相）

然后想起之前安装了nvm，对node版本的管理。

设置使用指定版本的node

$ nvm use v10.16.0
Now using node v10.16.0 (npm v6.9.0)

再次查看 vue命令是否可用

这时候可再次查看 vue命令是否可用

$ vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)

2、创建项目模板

$ vue init webpack-simple mobileProject
? Project name (mobileProject) mobileProject
>> Sorry, name can no longer contain capital letters.

Sorry, name can no longer contain capital letters.

抱歉，名称不能再包含大写字母。

把它改成小写，继续执行命令

$ vue init webpack-simple mobileproject
? Project name mobileproject
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? No
   vue-cli · Generated "mobileproject".
   To get started:
   
     cd mobileproject
     npm install
     npm run dev

执行命令以后，有关提示都直接 enter 回车就行。

这个回头项目构建成功，都可以在项目目录下的 package.json 文件上进行配置修改。

3、执行 npm install 命令

切换到项目目录，执行 npm install 命令，它就会把 package.json文件记录的包给安装下来！

$ cd mobileproject
$ npm install
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
。。。
。。。
npm notice created a lockfile as package-lock.json. You should commit this file.
added 847 packages from 584 contributors and audited 847 packages in 38.373s
found 11 vulnerabilities (3 low, 4 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

4、npm run start 启动项目

$ npm run dev
。。。
。。。
> cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8081/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.