安装Node.js
Vue的脚手架是依赖于node.js的,所以无论是安装新版本还是旧版本,我们都要安装node.js
只以windows系统版本为例,其他操作系统请自行下载安装。
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/
Node.js安装过程(傻瓜式安装):
步骤 1 : 双击下载后的安装包 v12.19.0,出现如下图所示:
步骤 2 : 点击 Next(下一步),出现如下图勾选接受协议选项,然后点击Next按钮 :
步骤 3 : Node.js默认安装目录为 "C:\nodejs\" , 你可以修改安装路径,并点击 Next(下一步):
步骤 4 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 Next(下一步)
步骤5:直接点击Next下一步即可
步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):
步骤7:等待安装过程,然后点击完成安装即可
注:完成安装后,将安装路径添加到环境变量中即可进行全局访问
验证是否安装成功:cmd中输入:node --version,出现如下图即表明安装成功
npm(node package manager)是node的包管理工具,我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。
由于现在版本的nodejs已经集成npm所以无需安装,node.js成功安装之后,npm一并安装成功,这个时候我们可以打开cmd窗口,输入 node --version
和 npm --version
来查看node.js和npm的版本,如果能够显示出版本,说明已经安装成功。
安装cnpm
安装cnpm代替npm,安装命令如下:
npm install cnpm -g --registry=https://registry.npm.taobao.org
其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,因为使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以使用cnpm稳一点。
注意:如果你发现你安装成功了,使用cnpm却发现找不到命令,就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\\nodejs\node_modules"
出现以下内容则表示cnpm安装成功:
安装VUE脚手架vue-cli
全局安装 vue-cli ,在命令提示窗口执行:
cnpm install -g vue-cli
安装成功后使用vue --version即可验证是否够安装成功,出现如下图即表明安装成。
创建VUE项目
安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:
vue init webpack my-project
cd到对应的目录下初始化vue项目,执行一下命令:
init webpack my-projectProject name 项目名 Project description 项目名描述 Author 作者邮箱 Use ESLint to lint your code? 是否需要ESlist语法检查 Set up unit tests 是否需要单元测试 Setup e2e tests with Nightwatch? Yes是否需要e2e测试
完成以上即会在指定的目录下生成vue的文件目录如下:
生成文件目录后,使用 cnpm 安装依赖,命令如下:
cnpm install
安装依赖完成过后,使用如下命令进行启动项目:
npm run dev
目录结构及其对应作用
通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境│ └── ...├── config/ │ ├── index.js # 项目核心配置│ └── ...├ ── node_module/ #项目中安装的依赖模块 ── src/│ ├── main.js # 程序入口文件│ ├── App.vue # 程序入口vue组件│ ├── components/ # 组件│ │ └── ...│ └── assets/ # 资源文件夹,一般放一些静态资源文件│ └── ...├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)├── test/│ └── unit/ # 单元测试│ │ ├── specs/ # 测试规范│ │ ├── index.js # 测试入口文件│ │ └── karma.conf.js # 测试运行配置文件│ └── e2e/ # 端到端测试│ │ ├── specs/ # 测试规范│ │ ├── custom-assertions/ # 端到端测试自定义断言│ │ ├── runner.js # 运行测试的脚本│ │ └── nightwatch.conf.js # 运行测试的配置文件├── .babelrc # babel 配置文件├── .editorconfig # 编辑配置文件├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹 ├── index.html # index.html 入口模板文件└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 └── README.md #介绍自己这个项目的,可参照github上star多的项目。build/