Vue学习的前期环境以及脚手架的搭建

第一次写博客，如有问题，还望见谅

前期环境配置

首先我是用的VS code来写的代码，所以大家可以先去官网下载一个VScode，轻量级的写代码的平台，里面有很多插件，相较于其他软件，能够书写更多代码语言，包括但不限于C++、JavaScript、Java、汇编语言等等。

起初我是用Hbuilder X来写前端的，那个时候还是个菜狗，主要是用HTML CSS JS无脑堆代码，框架什么的是没有的，但是有了框架这个东西之后，还是VScode更方便简洁一点。VScode的下载官网链接Visual Studio Code - Code Editing. Redefined

除了VScode，还需要下载nodejs,链接在此https://nodejs.org/en，在下载好nodejs之后可以启动cmd输入node -v检查是否安装成功，如果弹出来对应的node版本，那就是安装好了

安装好node之后就可以安装nodejs的包管理器——npm，由于其源在国外，所以国内用户的话推荐使用npm淘宝镜像https://registry.npm.taobao.org，在cmd里输入npm config set registry +镜像地址，就能配置好npm，同样的，在cmd中输入npm -v就能检查是否已经安装好npm以及对应的版本

在配置好一切之后我们就能进入VScode中写vue文件了。

脚手架的搭建

文件结构

 1.脚手架生成并在VScode中打开之后，主要有node_modules,public,src,以及其他用于打包或者转换css或者说明文档之类的一些东西

 2.node_modules中主要包括了一些插件，第三方库，比如我们调用的vue.js就是由此引入的

 3.public中主要有index.html的根页面部分，以及还有ico网页图标

 4.src中主要有assets（图像、音频等资源）、components（子组件）、App.vue(父组件)和main.js（vm实例）

 5.其他部分

node_modules:各种组件库，是Vue.js的最直接提供者

public:

            favicon.ico:页签图标

            index.html:主页面

src:

            assets:存放静态资源

            logo.png:各种图片

            component:存放组件

            HelloWorld.vue

App.vue:汇总所有组件

main.js:入口文件

.gitignore:git版本管理忽略的配置

babel.config.js:babel的配置文件

package.json:应用包配置文件

README.md:应用描述文件

package-lock.json:包版本控制文件

vue.comfig.js配置文件

1.只需要将Vue.config.productionTip = false写在main.js文件中，就可以避免Vue在使用过程中会在输出台报错

2.它其实是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载

3.使用 vue.inspect > output.js可以查看到Vue脚手架的默认配置

4.使用 vue.config.js可以对脚手架进行个性化定制,

 详情见： https://cli.vuejs.org/zh

快速搭建

1.首先安装好node.js确保本地全局变量能够支持脚手架的运行

2.然后在VScode的控制终端输入  vue create xxx(项目名称)

3.如果是第一次加载，可能要加载很多插件

4.加载完所有插件之后，说明电脑里已经安装好vue了

5.在创建好一个项目之后，你可以进入，并且进行运行，他会给你两个指令提示：

        1、cd （项目路径）————打开进入项目操作

        2、npm run serve ————运行项目至网页端

6.在敲完自己的代码之后，在终端输入npm run serve即可进行初始化，并且终端会返回两个网址，一个是本地端一个是网页端，打开即可查看自己的项目运行在网页上的样式