Vue 2.0 项目创建+Element-ui+Less+typescript[巨详细+巨简单+踩过的一些小坑]

先说点什么

刚从坑里爬出来,来和大家分享一下,也许我写的东西大部分文章都有,但是也有些新的东西,小白仔细看哦,大牛来了也请指点一二,也帮助我进步!

进入正题

Vue 2.0 项目的基本创建

一.Vue 2.0 的环境搭建

1.node.js安装
    安装原因:Node.js 是一个服务器端 JavaScript 解释器,既是开发平台, 也是运行环境
    坑:node.js 8.1.0版本创建项目的时候不能输入,注意绕过
    npm:是随同NodeJS一起安装的包管理工具,在官网下载安装node.js后，就已经自带npm
    安装:从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v和npm -v，如下图，如果出现相应的版本号，则说明安装成功。
   

2. 淘宝镜像安装
    安装原因:我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。
    安装:打开命令行工具(cmd),输入npm install -g cnpm --registry= https://registry.npm.taobao.org

   

安装的时候指令输入npm是从官方下载,速度可能慢一点,但是比较全,cnpm是从国内下载,可能不全.
最好使用npm

3.webpack安装
    安装原因:WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用.
    安装:打开命令行工具(cmd),输入npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。
    

4.安装vue-cli脚手架构建工具
    安装原因:vue-cli是Vue框架的搭建工具,就像是盖房子时房子的整体架构图,其作用是--构建目录结构、本地调试、代码部署、热加载、单元测试
    安装:打开命令行工具(cmd),输入npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
    

不同的输入和不同的结果,自己看

二. Vue 2.0 项目创建开始

1.选择安装目录

这是在桌面上创建(cd desktop)

这是返回上一级(cd..)

这是进入D盘

2.安装
打开命令行工具(cmd),进入安装目录,例如在桌面 输入vue init webpack new,(new是项目名字,随便点,但是不要写汉字,有些也不支持字母大写)

下图有个错误,说明一下:是ESLint代码规范不是es6规范

创建好了,这样

3.进入创建好的项目目录
    在原来的基础上再输入cd new,如下图

4.安装项目依赖
    打开命令行工具(cmd),输入npm install,最好别用cnpm install,上面说过

安装完了依赖这样

5.安装 路由模块 vue-router 和网络请求模块 vue-resource/axios
    介绍:说白点,路由是vue用来跳转页面的,网络请求是vue的ajax
    安装:npm install vue-router--save, vue-resource --save(npm install axios)
    特别:vue1.0用的是vue-resource,2.0之后用axios,因为resource的作者不更新了

说一下各个目录是干嘛的

6.启动项目
    在项目目录里输入 npm run dev,默认端口是8080

这就是创建好的项目

Vue添加其他插件

一. Element-ui

1.介绍:Element-ui是一套采用 Vue 2.0 作为基础框架实现的组件库,非常方便
2.安装:在项目目录里输入npm i element-ui -S
3.然后在 main.js 引入并注册
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element)

这时候可能会出错,报错是由于我们引入了 index.css 这个 CSS 文件，但是 webpack 打包的时候无法识别并转换成 js，所以就需要配置才能读取 css 和字体文件，运行命令安装下面三个东西(如果之前安装过就不需要了)

npm install style-loader --save-D
npm install css-loader --save-D
npm install file-loader --save-D

坑:一定要用-D,否则容易报错

在 webpack.config.js 中的 module下的rules 数组加入以下配置

{
    test: /\\.css$/,
    loader: "style!css"
},
{
    test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file"
}

坑:查看build/utils.js中的return里各种loader引入(如下图),如果有相关的引入,webpack.config.js里就不用加了,也就是上面一步省略

二. Less

1.介绍:Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
2.安装:在项目目录里npm install less less-loader --save(npm install -g less在全局中安装)
    修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
    {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
    },
    同上,省略这一步,因为build/utils.js中的return里的loader引入里有less
3.使用:在组件里创建<style lang=”less”></style>(style标签里加上 scoped 为只在此作用域 有效)
    这样就可以在里边写less了,或者引入less文件    @import './index.less'; //引入全局less文件

4.webstorm里自动生成less文件:网上有很多,自己百度.

三.TypeScript

略...

本文总结

1.全局安装需要加 -g
2.main.js文件里面的样式

这是main.js里文件的引入

这是main.js里的路由配置

3.Element引入可以是Element也可以是是ElementUI
4.组件的引入在main.js里,而less、js等文件的引入可以在main.js里,也可以在响应的标签里
5.通过在项目里安装的依赖都在这里(package.json),文件太多显示不全,知道在哪,什么样就可以了,想知道自己安装的依赖有没有,也可以看这里

package.json里的所有依赖

6.接着上面一点说一下,安装的时候 
    npm install --save-dev 则添加到 package.json 文件 devDependencies 下(开发的时候用),
    npm install --save 会把依赖包名称添加到 package.json 文件 dependencies 下(发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了).

最后再说点什么

希望本文可以给你提供一些帮助,这是我最高兴的,觉得我有写的不对或者有问题的地方也请帮我指正出来,大家互相帮助互相进步,以后有新的的发现还会添加到里边.

TypeScript暂时还没有加进去,目测vue里+ts挺麻烦的,后面研究差不多了再加进来,有懂的大神可以留一下地址,3Q!
差点忘了,对你有帮助或者觉得写的还可以的话麻烦点个收藏和推荐,3Q!