用后台开发的逻辑理念学习VUE
前言
近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习一个语法就可以了，它已经是一门编程技术了，它们有自己独立的类似Main函数的入口，有像MVC一样规范好的层次结构，有自己的开发工具可以发布打包程序，甚至还可以独立连接数据库，当然了，优点与缺点共存，不能向其他语言那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发一样，但它还是已经可以称为一门编程技术了，所以学习一门前端开发，已经是一件非常有意义的事儿了。
新建项目
首先安装Nodejs，然后我们一起学习使用Vue。
安装Nodejs参考：【在Windows下学习Nodejs、Npm和VUE】
node下载地址：https://nodejs.org/dist/
Vue是一个前端框架，安装了Nodejs后，可以使用Npm命令直接下载vue。
打开cmd窗口，依次输入如下命令：
npm i vue -g npm i vue-cli -g
注：输入【npm i vue -g】下载vue时，尽量使用-g，因为vue的文件中有一些文件是可以vue开头的命令行的，因为-g是下载到环境变量配置的Path地址，所以如果下载到这里，那么vue开头的命令就可以在cmd窗口中直接使用了，不然还需要重新配置环境变量，添加当前下载目录。
npm i module_name -S 即 npm install module_name --save 写入dependencies，发布到生产环境 npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies，发布到开发环境 npm i module_name -g 即 global全局安装(命令行使用) npm i module_name 即 本地安装(将安装包放在 ./node_modules 下)
下载完Vue后，我们新建一个文件夹，然后打开CMD跳转该目录，如【cd/d F:\Nodejs2】，然后使用vue开头的命令创建一个项目，在cmd窗口输入命令如下：
vue init webpack my-project
输入完命令后，会提示我们配置项目信息，可以一直回车使用默认配置，然后等待项目创建完成。
该命令创建的项目是VueCli2.0模板的项目，VueCli3.0以上使用vue create xxx(名称)）。
vue create my-project
卸载vuecli2安装vuecli3及以上
npm uninstall vue-cli -g 卸载旧版本 npm cache clean --force 清除缓存 npm install -g @vue/cli@3 安装Vue CLI 3 npm install -g @vue/cli 安装Vue CLI 4 npm -V npm update
注：输入vue init webpack my-project后，不要切换窗口，一直回车，就可以创建成了，如果切换窗口了，切换回当前cmd窗口后，回车有时候无法直接输入，需要操作下才能输入，比如先按一下个上下左右键。
项目创建完成后，得到如下界面内容。
项目创建完成，我们会在目录下多了一个文件夹—my-project。
然后我们在通过CMD命令在跳转到项目目录【cd/d F:\Nodejs2\my-project】，然后运行npm install，进行初始化。
npm install
最后，我们再输入命令npm run dev，得到窗体如下：
然后打开浏览器，输入http://localhost:8080，vue项目运行成功，如下图：
注：vue自带了一个类似server.js的配置，所以运行npm run dev命令后，会启动一个服务器。
学习项目
通过VisualStudioCode将新建的项目打开。
刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件，不然保存代码时会自动格式化了，然后html代码全乱了
禁用方法：ctrl+shift+X调出扩展，搜索JS-CS-HTML Formatter ，然后禁用，然后重启。
新建项目结构如下图：
结构描述如下表：
| 文件夹/文件 | 描述 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .其他文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 这是一个模板文件，同时又是Main.js的展示页面，也可以理解为Index.html的ViewModel是Main.js，Main.js是项目启动的入口。项目启动时Main.js会读取该页面，然后把当前显示的vue文件渲染进该页面。类似于MVC中的layout.cshtml文件的作用。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
src核心
src是我们代码编写的核心文件，其内容如下：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
main.js: 项目的核心文件。
代码详解
Main.js
Main.js是项目的入口，类似其他语言的Main函数，代码如下：
import Vue from 'vue'//引入vue.js文件
import App from './App'//引入当前目录下的App.vue文件，【./】指当前目录，【.vue】被隐藏了
import router from './router'//引入当前目录下router文件夹下的Index.js文件
Vue.config.productionTip = false//屏蔽调试时的一些console日志内容
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//指定路由的js对象
components: { App },//加载上方导入到组件。
template: '<App/>'//选择一个组件去替换index.html 中的<div id="app"></div>。这里使用我们components导入的App组件，相当于指定初始化时的显示组件，Vue组件注册后可以使用<tagName></tagName>的模式来使用组件。可以参考—https://www.runoob.com/vue2/vue-component.html
})
import
import类似其他语言的引入命名空间或引入包，这里主要是用于引入js文件和vue文件。
如果引入的是js文件，则鼠标放到引用上，会显示具体引用路径，如下图：
new Vue
new Vue这一段是创建一个js的Vue对象，该对象的构造函数，接受一个对象，这里传了一个匿名对象，我们可以看到，new Vue后的圆括号【(】里，跟了一对大括号【{】，然后这个对象里，有几个属性，需要初始化。
el：估计是element的缩写，表示Vue绑定的元素。
router：router是我们上面引入的router文件夹下的Index.js文件，打开文件，代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
可以看到，代码中开放了一个默认的Router类型的对象，这个对象是vue-router中定义的，用于定义页面跳转路由，这里定义了路径HelloWorld对应导入/components/HelloWorld.vue文件。
ps:export类似于其他语言的public，就是公开该js文件的某个对象或函数，export default就是默认公开的那一个，这样其他js文件使用import导入该js文件时，就可以省略指定对象这几个代码，这种是一个很原始的程序设计风格，大家还需要适应。
App.Vue
App.Vue是Main.js默认加载的模块，其代码如下：
<template>
<div id="app">
<h2>Kiba518</h2>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这里主要是用于配置路由视图—— <router-view/>，其他的样式我们可以暂时忽略。
可以看到我们把路由视图(router-view)配置在了一个div中，并且还放在了一个H2下面，这样，我们的这个H2标签就永远会在路由视图上面了。
运行项目
我们对App.Vue和HelloWorld.vue进行了简单修改，然后不用重启，不用编译，只需要重新切换回刚刚的那个网页——http://localhost:8080。
如上图所示，我们得到了修改页面。
其他常用命令
npm config get registry #用于查看当前 npm 使用的软件包注册中心（registry）的地址。
# 下面是更改地址 npm config set registry https://registry.npm.taobao.org npm config set registry https://registry.npmjs.org/ npm config set registry https://registry.npmmirror.com/
# 查看可以vue版本 npm view @vue/cli versions # 列出全局安装的 Vue CLI（@vue/cli）及其依赖项的版本信息。 npm list -g @vue/cli # 用于列出当前项目中安装的@vue/cli及其依赖项的版本信息。 npm list @vue/cli # npm版本 npm -v
清理包
npm cache clean --force
----------------------------------------------------------------------------------------------------
注：此文章为原创，任何形式的转载都请联系作者获得授权并注明出处！
若您觉得这篇文章还不错，请点击下方的【推荐】，非常感谢！
https://www.cnblogs.com/kiba/p/13673631.html
