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

2019-08-14 10:07:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 

 

完.


原文链接:https://www.cnblogs.com/fresh-lulu/p/11137441.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css隐藏滚动条、移动端滚动卡顿的解决

下一篇:十一、vue生命周期诠释--带图