Vue学习（十二）——创建项目（1）

（1）我们的项目用的是webstorm，视频里面用的是CLI脚手架。在创建项目的时候，脚手架有很多选项可以选择，比如说是否需要typescript，是否要Router或者Vuex等等。选择完成之后会自动的安装。但是在webstorm里面需要在npm的终端自己的安装npm install router.....等等。

使用webstorm创建Vue.js，会默认使用babel和eslint。

根据唐金州的视频，一个项目需要安装的依赖除了以上两者还有：

（1）Router     /npm install router      //在视频中，使用cli的搭建项目会要你选择router是使用hash还是使用history，选择history。

                                                            //使用webstorm时，需要自己新建router.js文件。

（2）Vuex        /npm install vuex       //使用webstorm时，需要自己新建store.js文件

（3）CSS Pre-processors          /npm install less

 (4)   Lint/Formatter                     /npm install lint  /npm install prettier/

(5)   Unit-Testing                         /有两种解决方案mocha+chai 还有一种是Jest。视频里选了Jest.

视频里面认为Vue对Typescript的支持不够好，有好多坑，所以他不选择Typescript。

但是要注意以上是使用cli脚手架所提供的选项，所以第一个字母都是大写，在nmp install时不能使用大写，不然会找不到。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

NOTE1: 可以使用简写命令 npm i less prettier 如果安装多个包 则包和包之间加个空格就可以了。

NOTE2: npm install了依赖之后并不代表就可以用它了，还需要在入口文件main.js中import它。像vuex和router依赖是在单独的store和router文件中已经被import了，所以在main.js中不用再import。main.js以及

NOTE3:  ant-design-vue和"ant-design-vue/dist/antd.css"是两回事情，后者（样式）要另外import。但是很奇怪，安装依赖的时候，只需要安装ant-design-vue。

NOTE4: 样式的问题比较繁琐，样式分成css/less/stylus，这里选择less，所以要import "ant-design-vue/dist/antd.less"，如果是选择其他的方式的话最后也要翻译成less。为了使用less，必须要在根目录下新建一个vue.config.js文件，里面配置：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions:{
                    javascriptEnabled: true,
                }
            }
        }
    },
}

如果不这样配置的话，就会出现javascript没有enable的报错（不要问我为什么）。vue-cli的模板命令可以查找https://cli.vuejs.org/。

NOTE5: Babel的目的是为了按需安装css样式。因为import ant-design-pro的css之后，是把所有的css都load进来了，有12M多，用不了那么多，很占空间。使用babel的话，就可以按需安装想要的控件，节省控件。但是对于我们这个项目不怎么重要，所以先不装。但是小马装了。