vue-cli（vue）项目的安装及开启

Posted 2021-09-07 气概

1.安装需要的环境及vue-cli：

【node.js】

官方：http://nodejs.cn/download/ 下载安装；

命令行输入：node -v，检查是否安装成功；

【npm】

官网安装node.js后，就已经自带npm；

命令行输入：npm -v，检查是否安装成功；

【cnpm】

命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

命令行输入：cnpm -v，检查是否安装成功；

【webpack】

命令行输入：cnpm install webpack -g

命令行输入：webpack -v，检查是否安装成功；

【vue-cli】

命令行输入：cnpm install vue-cli -g

命令行输入：vue -V，检查是否安装成功；

2.新建并初始化一个vue项目

【myvue】

新建一个文件夹myvue，放置vue项目

【init项目】

命令行进入myvue上一级目录，输入：vue init webpack myvue

【初始化配置选择】

? Target directory exists. Continue? (Y/n) y ——找到目标目录，是否继续? y

? Project name (myvue) —— 项目名（默认文件名）

? Project description (A Vue.js project) ——项目描述(默认)

? Author wwb——项目作者

? Vue build (Use arrow keys) ——创建方式（选默认第一个）

> Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific html) are ONLY allowed in .vue files - re

nder functions are required elsewhere

? Install vue-router? (Y/n)y —— 安装路由? y

? Use ESLint to lint your code? (Y/n)n ——使用eslint检测规则?n

? Set up unit tests (Y/n)n —— 安装单元测试?n

? Setup e2e tests with Nightwatch?n (Y/n) ——安装e2e测？n

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) ——项目创建后运行“npm install”？（选默认第一个即可）

> Yes, use NPM

Yes, use Yarn

No, I will handle that myself

【初始化完成】

To get started:

cd myvue

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

【运行项目】

命令行输入：cd myvue

命令行输入：npm run dev

【启动成功】

 

 

【可能的报错】

"Cannot find module 'webpack/bin/config-yargs"

【解决办法】

命令行输入：npm install webpack-cli -D

命令行输入：npm update

命令行输入：npm run dev