Vue项目环境搭建

vue-cli手脚架的搭建步骤

首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，可参考我的另外一篇博客中提到的关于node的安装步骤 初识react之react+webpack+es6环境配置步骤整理 ，这里就不多说了。

vue3.0与vue2.0的区别：
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

• 1）打开cmd命令窗口，切换到你要新建项目的文件夹下，此时可使用node -v检查node的版本，如果出现版本号则node已安装。

  
  
  node-v命令图片
• 2）使用以下命令全局安装vue-cli

// 安装国内淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 搭建脚手架
npm install -g @vue/cli-init

• 3）使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称

  
  
  image.png

• 4）配置需要安装的vue环境

  
  
  image.png

• 5）以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了。

  
  
  image.png
• 6)安装依赖

cnpm install

• 7）执行 npm run serve 命令，启动项目 (vue3.0的启动命令，vue3.0以下的是npm run dev)
  +8)当出现下图时，说明项目启动成功！
  
  image.png
  
  这时我们可以通过浏览器访问链接 http://localhost:8080 来访问项目了。这时页面如下图：
  
  image.png