vue学习记录①(vue-cli脚手架构建项目结构)

时间:2021-01-02 19:38:37

我们直接从vue的工程化开始入手。

在这里用git命令行搭建项目环境。(当然直接cmd命令行下也是一样的)

git下载安装地址:https://www.git-scm.com/download/win

git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html

git常用命令整理:http://www.cnblogs.com/luxiaoxing/p/7545403.html

1.node安装。

node下载安装地址:http://nodejs.cn/download/

注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;

安装过程就是一直点击Next就好,安装完成后可以在命令行输入node -v查看版本信息。

vue学习记录①(vue-cli脚手架构建项目结构)

2.安装淘宝镜像。在命令行下输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后可以在命令行输入cnpm -v查看版本信息。

vue学习记录①(vue-cli脚手架构建项目结构)

因为npm的服务器在国外,有时候安装依赖的时候会很慢,所以用cnpm来安装依赖会相当快,其用法跟npm一样。(推荐使用cnpm)

3.安装webpack,在命令行下输入:

cnpm install webpack -g

安装完成后可以在命令行输入webpack -v查看版本信息。(如安装错误需全局安装webpack-cli,在命令行输入cnpm install webpack-cli -g)

vue学习记录①(vue-cli脚手架构建项目结构)

webpack详细使用教程请移步:[js高手之路]深入浅出webpack教程系列

4.安装vue-cli。在命令行下输入:

cnpm install -g vue-cli  

安装完成后可以在命令行输入vue -V查看版本信息。

vue学习记录①(vue-cli脚手架构建项目结构)

这个vue-cli呢,是vue的脚手架工具,可以自动生成目录,跟express生成器差不多。

 

现在我们就可以用vue-cli脚手架生成一个工程项目了,项目名称是test。

1.选择或新建一个文件夹作为你的工程项目目录。

2.在这个指定的文件夹上面右击选中Git Bash就可以打开命令行了(没有安装git的可以cd 切换到你指定的目录下),在命令行下输入:

vue init webpack test

vue学习记录①(vue-cli脚手架构建项目结构)

这时候会有一些提示你的信息,你只需一直回车即可。如下图test这个项目的基本结构就自动生成了。

vue学习记录①(vue-cli脚手架构建项目结构)

此时我们就可以在指定的文件夹下看到test这个新生成的项目文件夹以及里面的项目结构了。

vue学习记录①(vue-cli脚手架构建项目结构)

3.同时我们在test这个文件夹下打开命令行,安装项目所需的依赖(因为用脚手架的时候会自动构建package.json文件,所以这里直接安装依赖就好)。命令行下输入:

cnpm install

vue学习记录①(vue-cli脚手架构建项目结构)

安装完成后test文件夹里面会多一个node_modules的文件夹也就是所需的依赖文件了。

vue学习记录①(vue-cli脚手架构建项目结构)

vue学习记录①(vue-cli脚手架构建项目结构)

4.运行项目。在test文件夹下打开命令行并输入:

npm run dev

服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:

vue学习记录①(vue-cli脚手架构建项目结构)

最后,这个test的项目就用vue-cli脚手架工具构建好了。

项目部署

接下来,使用npm run build来部署上线的项目

npm run build

vue学习记录①(vue-cli脚手架构建项目结构)

 生成的dist目录,就是打包构建后的项目目录。