1.Vue项目前期准备
Hello,大家好,之前的文章大家已经对Vue有了基本的了解,就算预热了吧。接下来我会以这个项目为基础更新一系列的文章,目的希望大家利用工作学习之余的碎片时间通过这个项目来学习vue和node等知识点。希望大家都一起参与进来,动手实践,有什么问题都可以在留言或私信我一起讨论学习。文章中有什么错误也欢迎大家留言指出,共同学习,一起进步,早日走上前端巅峰。
一、git仓库
1、开始前我先在github上创建了一个仓库,大家可以fork这个仓库:protal_vue;以此仓库为核心,我会把每天新完成的代码提交上去更新,一直到大家一起把这个项目做完;大家fork完以后可以同步我的仓库查看或者在我的仓库上直接做修改,有问题也可以提issue。
2、大家在github上建一个自己的项目,自己动手亲自写一遍,有问题可以查看fork的核心仓库,也可以在群里一起讨论解决问题。
好了,废话不多说了,今天的内容很简单,就是把前期的准备工作做好,环境搭好,为我们后面的项目做准备。
二、安装node环境
去官网上根据自己的电脑环境下载对应的版本;然后傻瓜式的点下一步完成完成即可,然后打开命令行输入:
image如果显示版本号了就证明你安装成功了。
三、用脚手架搭建一个基于webpack的vue项目
1、命令输入
安装的步骤官网已经写得十分详细了,我就照搬过来了:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm run dev
2、含义
安装过程中出现的命令行是什么意思呢?我简单解释下,从上到下依次的含义为:
- 项目的名字是什么? 我们这里选默认的
myproject
- 项目的描述? 默认
- 项目的作者?
- 是否使用路由
v-router
? 我们选yes - 是否使用
ESLint
语法校检? 我们选n
( ps:ESLint
语法校检工具可以帮你养成良好的编码习惯、规范的格式,但是每个人习惯不同,会很繁琐,所以前期我们选择不安装。) - 后面
unit tests
、e2e tests
都是测试等相关,这里我们不于安装。
3、安装完成,我们进入项目启动编译
新的vue-cli
脚手架构建一个新的项目的时候,连依赖都一起帮你安装好了,也就是不用进入项目后使用npm install
安装依赖了,帮我们省略了一个npm install
的步骤。
(1)好,现在我们进入项目,npm run
启动编译:
(2)现在我们进入浏览器中输入http:localhost:8080
就可以看到一个初始化的vue项目
四、其它
因为某些总所周知的原因,如果你老是用npm安装失败,可能你先需要先安装一个cnpm镜像
其实vue里面很多插件的安装和使用都是类似的,所以这里抛砖引玉,拿出几个案例出来理解一下就好。
1、使用淘宝npm镜像
很多安装失败的原因就是因为国内网络限制因素,所以使用淘宝镜像有利于解决这方面问题。(已经科学上网的同学可以跳过)。
安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
$ cnpm install [packagename]
2、安装vue-cli
官网写得很详细了,照着敲。
安装cnpm
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目,项目名为my-project
$ vue init webpack my-project
进入到项目名为my-project的文件夹里
$ cd my-project
安装依赖,走你
$ npm install
运行
$ npm run dev
3、安装node-sass
(网不好用cnpm)
$ cnpm install node-sass --save-dev
sass-loader用来处理sass文件
$ cnpm install sass-loader --save-dev
然后:
<style lang="scss" scope>
/*输入你的sass代码*/
</style>
4、mintUI安装
npm(cnpm)安装
$ cnpm install mini-ui -save-dev
import Vue from 'vue'
import App from './App.vue'
//引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
//要记得use一下,然后就可以在全局中使用了
Vue.use(MintUI)
5、其实各类插件、库等安装的方法都大同小异,理解理解就好。