vue项目结构

前言: 初学Vue是有必定的学习成本的。好比我刚开始接触Vue时，我还未接触node.js，脚手架webpack。在安装时就遇到了难题。vue-cli做为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都很是方便快捷。

1、安装Node环境

在node.js官网下载稳定版本，我是在Windows下安装的。

 

下载完成后点击安装，安装过程很简单，一直next便可，安装完成会自动添加node及npm环境变量。

检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功

 

2、安装vue-cli

打开cmd命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli

(注：npm会有点慢，建议更改成国内淘宝的镜像，只换源便可。在cmd输入命令：npm config set registry https://registry.npm.taobao.org)

构建vue-cli项目

一、建立项目

打开cmd，进入想要建立项目的目录下，输入：vue init webpack projectname

projextname是自定义的项目名称，例：我这里命名为vuedemo

 

命令输入完成后敲回车，此时会自动下载template模板，稍微等待一会，会让你按提示完成项目的建立，以下图

建立vue-cli项目

Project name:——项目名称

Project description:——项目描述

Author:——做者

Vue build:——构建模式，通常默认选择第一种

Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 不然你会很是痛苦，eslint的格式验证很是严格，多一个空格少一个空格都会报错，因此对于新手来讲，通常不建议开启，会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，能够不用安装

二、安装依赖

项目建立完成，打开文件夹能够看到目录结构以下

未安装依赖时项目结构  

此时，项目已经初具雏形，但还未安装依赖。安装依赖库就是node_modules目录下一堆的库。这里你先简单理解为项目运行所需的东西就好。打开cmd，进入项目所在根目录下，输入npm install，回车，若是网络很差，须要一段时间。

依赖安装中

依赖安装结束

咱们此时再打开项目文件夹，能够看到多了node_modules文件夹，里面是各类须要的依赖包

安装依赖后项目结构  

三、运行项目

打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目

 

完成后，浏览器会自动打开，监听端口8080

 

能够在浏览器看到以下画面，恭喜你，已成功构建vue-cli项目，接下来就能够开始开发啦

成功了

你也许初学，不懂webpack，node.js，vue.cli，OK，不要紧，照着这篇文章一步步作下来，安装webpack,npm,node,vue.cli，最终能运npm dev run运行项目便可。至少你如今能访问vue项目的页面了。