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 欢迎大家加我 共同学习 一起进步。

猜你喜欢

转载自blog.csdn.net/qq_39408204/article/details/84974147
今日推荐