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

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

1、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://www.javashuo.com/tag/http://localhost:8080，打开该连接便可看到你的项目

 

2、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://www.javashuo.com/tag/http://localhost:8080

　　打开该连接便可看到你的项目

 

 

完.