vue学习 vue-cli 项目搭建

Posted 2022-03-17 fresh-lulu

vue学习(1)  vue-cli 项目搭建

一、windows环境

1. 下载node.js安装包

　　官网：https://nodejs.org/en/download/

　　选择LTS下载

2. 安装

　　下载完成后点击安装包安装到自己指定的文件夹

　　windows + r 打开cmd，在命令行中输入node -v，如果安装成功就可以看到当前node的版本

　　输入npm -v，可以看到相应的npm的版本

3. 安装vue-cli

　　npm install -g cli

4. 创建cli项目

　　首先cd进入到你想要创建项目的文件夹目录下

　　vue init webpack my-vue

　　根据提示信息完成创建，项目名、项目描述、作者名、build、路由、ESLint、测试等，ESLint后面几个推荐选择no

5. 运行

　　创建完成后执行 

　　cd my-vue 

　　npm run dev 即可看到提示

　　Your application is running here: http://localhost:8080，打开该链接即可看到你的项目

 

二、mac环境

1. 下载node.js安装包

　　官网：https://nodejs.org/en/download/

　　选择LTS下载

2. 安装

　　下载完成后点击安装包安装到自己指定的文件夹

　　打开终端，在命令行中输入node -v，如果安装成功就可以看到当前node的版本

　　输入npm -v，可以看到相应的npm的版本 （若安装失败可以重新下载安装包进行安装）

3. 安装webpack

　　npm install webpack -g

　　会提示安装webpack-cli，根据提示安装即可

　　若因为权限原因安装失败，在安装命令行之前加入sudo,根据提示输入密码即可

4. 安装vue-cli

　　npm install cli -g 

5. 创建cli项目

　　首先cd进入到你想要创建项目的文件夹目录下

　　vue init webpack my-vue

　　根据提示信息完成创建，项目名、项目描述、作者名、build、路由、ESLint、测试等，ESLint后面几个推荐选择no

6. 运行

　　创建完成后执行 

　　cd my-vue 

　　npm run dev

　　即可看到提示 Your application is running here: http://localhost:8080

　　打开该链接即可看到你的项目

 

 

完.