Vue.js —— Vue Cli3构建Vue+ant design vue项目

编辑器需添加插件：

前提：我使用的是vs code编辑器。
1、beautify——代码格式化。
2、vetur——支持.vue文件的语法高亮显示、自动完成等。

浏览器需添加插件：

vue-devtools —— vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。【后可以直接在谷歌浏览器的扩展程序商城中下载。不能的参考这篇文章https://www.cnblogs.com/momozjm/p/7098476.html】

安装Node.js、npm

1、Node.js 官网地址：https://nodejs.org/en/
查看版本号 ：node -v
node的安装包自带npm，所以安装好node.js，就同时安装好了npm
可以查看版本号：npm -v

安装Vue Cli3脚手架

npm install -g @vue/cli

Vue Cli3简介：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  1、可升级；
  2、基于 webpack 构建，并带有合理的默认配置；
  3、可以通过项目内的配置文件进行配置；
  4、可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

查看vue版本号：vue -V

创建vue项目

1、vue create program-name

vue create 项目名

2、vue ui 图形化方式创建

vue ui

运行项目

进入项目文件夹：cd my-program
然后：npm run serve

初始项目目录如下：

• node_modules 文件 及 子目录
  这个文件夹里面全部都是node的一些基础的依赖包，当我们安装一些别的插件时，也会装在这个文件夹里。

• src 文件 及 子目录
  这个文件夹 是 整个项目的主文件夹 ， 我们的代码大部分都在这里完成。

• src 下的 assets 文件夹里面主要放置一些资源文件。比如javascript 、css 之类的文件。

• src 下的 components 文件夹可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。

• src 下的 router 文件夹 及 子目录，这个文件夹里的是整个vue项目的路由。

• src下的 app 文件 ，这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。

• src 下的 main.js 文件，这个文件是项目的主js,全局的使用的各种变量、javascript、插件 都在这里引入 、定义。

package 文件
是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 ， 版本号。 当在项目里使用npm install 时 node 会自动安装， 这个文件里的所有插件。

README.md文件
项目说明。

.gitignore文件
git上传需要忽略的文件格式。

vs code 创建vue模板

1、打开vs code编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue， 点击vue.json选项。
2、在vue.json的文件中，复制以下内容（我个人习惯用这套模板，你可以根据自己的需求来修改）：

{
	"Print to console": {
	  "prefix": "vue",
	  "body": [
		"",
		"",
		"",
		"",
		"",
		""
	],
	"description": "Log output to console"
	}
}

安装ant design vue UI组件库

npm i --save ant-design-vue

安装less

npm i -D less

安装less-loader

npm i -D less-loader

按需引入UI组件需下载以下两个插件

1、moment.js

npm install moment --save

2、 babel-plugin-import

npm install babel-plugin-import --save-dev

文件配置

1、.babelrc

{
    "plugins": [
      ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
    ]
}

2、vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      },
      less:{
          javascriptEnabled: true,
      }
    }
  }
}

未完待续。