新建项目近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习一个语法就可以了，它已经是一门编程技术了，它们有自己独立的类似main函数的入口，有像mvc一样规范好的层次结构，有自己的开发工具可以发布打包程序，甚至还可以独立连接数据库，当然了，优点与缺点共存，不能向其他语言那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发一样，但它还是已经可以称为一门编程技术了，所以学习一门前端开发，已经是一件非常有意义的事儿了。

 

　　首先安装nodejs，然后我们一起学习使用vue。

 

　　vue是一个前端框架，安装了nodejs后，可以使用npm命令直接下载vue。

 

　　打开cmd窗口，依次输入如下命令：

 

　　注：输入【npm i vue -g】下载vue时，尽量使用-g，因为vue的文件中有一些文件是可以vue开头的命令行的，因为-g是下载到环境变量配置的path地址，所以如果下载到这里，那么vue开头的命令就可以在cmd窗口中直接使用了，不然还需要重新配置环境变量，添加当前下载目录。

 

　　下载完vue后，我们新建一个文件夹，然后打开cmd跳转该目录，如【cd/d f:\nodejs2】，然后使用vue开头的命令创建一个项目，在cmd窗口输入命令如下：

 

　　输入完命令后，会提示我们配置项目信息，可以一直回车使用默认配置，然后等待项目创建完成。

 

　　注：输入vue init webpack my-project后，不要切换窗口，一直回车，就可以创建成了，如果切换窗口了，切换回当前cmd窗口后，回车有时候无法直接输入，需要操作下才能输入，比如先按一下个上下左右键。

 

　　项目创建完成后，得到如下界面内容。

 

　　项目创建完成，我们会在目录下多了一个文件夹—my-project。

 

　　然后我们在通过cmd命令在跳转到项目目录【cd/d f:\nodejs2\my-project】，然后运行npm install，进行初始化。

 

　　最后，我们再输入命令npm run dev，得到窗体如下：

 

　　然后打开浏览器，输入项目运行成功，如下图：

 

　　注：vue自带了一个类似server.js的配置，所以运行npm run dev命令后，会启动一个服务器。

 

　　刚刚安装的vscode需要禁用js-cs-html formatter插件，不然保存代码时会自动格式化了，然后html代码全乱了通过visualstudiocode将新建的项目打开。

 

　　禁用方法：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函数，代码如下：main.js

 

　　import

 

　　import类似其他语言的引入命名空间或引入包，这里主要是用于引入js文件和vue文件。

 

　　如果引入的是js文件，则鼠标放到引用上，会显示具体引用路径，如下图：

 

　　new vue

 

　　new vue这一段是创建一个js的vue对象，该对象的构造函数，接受一个对象，这里传了一个匿名对象，我们可以看到，new vue后的圆括号【（】里，跟了一对大括号【{】，然后这个对象里，有几个属性，需要初始化。

 

　　el：估计是element的缩写，表示vue绑定的元素。

 

　　router：router是我们上面引入的router文件夹下的index.js文件，打开文件，代码如下：

 

　　可以看到，代码中开放了一个默认的router类型的对象，这个对象是vue-router中定义的，用于定义页面跳转路由，这里定义了路径helloworld对应导入/components/helloworld.vue文件。

 

　　ps:export类似于其他语言的public，就是公开该js文件的某个对象或函数，export default就是默认公开的那一个，这样其他js文件使用import导入该js文件时，就可以省略指定对象这几个代码，这种是一个很原始的程序设计风格，大家还需要适应。

 

　　app.vue

 

　　app.vue是main.js默认加载的模块，其代码如下：

 

　　这里主要是用于配置路由视图—— ，其他的样式我们可以暂时忽略。

 

　　可以看到我们把路由视图（router-view）配置在了一个div中，并且还放在了一个h2下面，这样，我们的这个h2标签就永远会在路由视图上面了。

 

　　我们对app.vue和helloworld.vue进行了简单修改，然后不用重启，不用编译，只需要重新切换回刚刚的那个网页——

 

　　如上图所示，我们得到了修改页面。

 

　　到此vue的基本使用已经介绍完了。