VueStudy相关的基础配置

一、安装基本框架

npm install vue-cli -g  //安装全局范围的脚手架用于生成基础的模板

我们可以通过下面的指令测试自己创建了什么模板
vue list

1、 npm下载速度太慢

        方式1：安装国内类似的工具cnpm

npm install cnpm -g 
#-g 就是进行全局范围的配置

        方式2：配置国内的淘宝代理

npm install jquery --registry=https://registry.npm.taobao.org
#为了不用每次下载文件时都进行配置淘宝镜像，我们可以讲淘宝镜像添加到配置文件中
npm config set registry https://registry.npm.taobao.org

        我们可以查看自己npm的配置信息

npm config list

二、初始化自己的模板框架

         1、根据自己的需要进行模板选择

vue init webpack myvue
#这里的myvue是自己设定的项目名称，webpack表明自己创建一个基于webpack模板的应用程序

如果选择自己定义的模板报错，也可以选择创建空项目
vue create guojunblog

        之后可以根据提示进行选择或者一直回车进行下一步， 选择可以选择no，这样我们可以自己更加清楚的了解项目是怎么进行配置的

        2、之后安装我们的基本模块依赖

npm install

         3、运行基本的模板helloworld

npm run dev

         注意系统初始运行的指令和我们在package.json中的配置文件有关，还有其他的运行方式

         这样我们就已经搭建好了一个基本框架，之后我们根据自己的需要进行更改即可

三、Vue项目框架简单解读

   1、系统的初始化调用依然是index.html

        但是需要注意的是这个index.html其实里面只是配置html的头部文件，body内容则是分化成各个组件，而各个组件最终在App.vue中进行拼接，index.html只是调用这个最终的框架

   2、App.vue是总的框架拼接

        App.vue会将所有的框架都导入进来汇总成各个组件components的形式，同时将自己导出，命名为App

 

  3、main.js关键的配置文件，实例化系统模板

        main.js实例化了系统的模板，相当于java中的实例化对象，其实vue项目关键就是强化了编程思想在前端页面中引入了非常多的js代码，和java项目结构非常的类似相当于用js代码对全局进行配置，这个一定要好好理解，刚开始入门时不怎么容易明白，系统初始运行时就会自动运行这个main.js代码

  4、组件components

        vue项目关键就是各个组件，然后在App.vue将这些组件进行汇总，而这些组件其实就是html代码，但是需要注意的是我们需要将我们自己定义的模板进行申明导出export然后其他的组件才可以采用import的方式进行导入，而这些操作也都是采用js代码进行完成的，现在知道vue项目框架关键就是熟练使用js代码

四、项目内容

  1、包管理

        所有的项目依赖包都安放在node_modules目录下，但是对于这些包的申明版本控制放在package.json文件中，如果出现依赖相关的问题，我们可以通过修改包的版本进行适配，将版本调高或者降低根据自己的需要。这个非常类似java项目中的maven进行的版本控制

  2、项目部署的相关配置

        config文件夹下存在的是一些配置文件，其中index.js这个文件用来对项目部署时进行一些基础性的配置，比如端口号的占用，本地访问控制还是外网访问控制