vue 采坑之旅（一） 从0搭建一个vue项目

Vue介绍 （官网）

---

Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

 

安装前你需要了解的一些知识

---

• HTML
• CSS
• Javascript
• 命令行工具

 

第一步安装node.js

---

先从node官网下载安装node环境，傻瓜式操作，一直‘next’，就可以了

安装完以后，打开命令行工具输入node -v，检测node是否安装成功。

再次输入npm -v，查看集成在node中的npm包是否安装成功。

出现对应版本则表示安装成功。

 

第二步安装cnpm

---

点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装完成，使用cnpm和npm的方法是一样的 下文都讲采用cnpm来替换npm

 

第三步安装vue-cli

---

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

1.在安装脚手架工具之前 需要全局安装webpack。

命令行输入 cnpm  insatall webpack  -g 或者 cnpm install -g webpack

注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令  npm install webpack webpack-cli -g

 

2.全局安装vue-cli，在cmd中输入命令:

cnpm install --global vue-cli

等待安装完成后 输入vue -V  ；注意这里的-V是大写的V

 

创建一个基于 webpack 模板的新项目

---

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

#mydemo为自定义项目名
vue init webpack mydemo

之前碰到过一种不兼容的报错 提示 webpack 找不到 报错 可以尝试下使用：

vue-init webpack mydemo

我这里就出现不兼容问题 使用了第二种安装方式

 等待安装完成后 如图 警告状态可以忽略

如图所示 打开项目目录  运行项目

输入以上操作 cd mydemo  cnpm run dev 

打开浏览器输入http://localhost:8081 

 

 

好了 到这里恭喜你一个vue项目就搭建成功了 ，刚开始写博客 很多地方写的可能不是很通俗易懂，大佬勿喷，

这篇博客打算写一个系列的入门教程，近期再整理下补上第二章，项目配置文件解析，配置webpack 打包上线等。

一个正在前端路上向前摸索的初级初级程序猿

QQ:2557551314 欢迎大家加我 共同学习 一起进步。