如何开始一个vue项目

万事开头难~

刚开始学习vue.js就是看看官方文档,然后在.html文件里引入下载到本地的vue的库文件,来跟着敲示例代码。但是接触到vue的项目,发现自己完全不知从何下手。之后再网上查找了一些vue开发环境搭建的教程,跟着把环境搭建好了,现在梳理总结一下,以免忘记。

步骤如下:

1.安装node.js


官网地址:https://nodejs.org/en/download/
根据需要选择下载,安装时一直点下一步就好(傻瓜式安装),安装路径可以自定义。
检测:命令窗口(win+R 运行cmd)输入命令 node -v,出现版本号则说明安装成功。
npm包管理器是集成在node中,所以输入命令 npm -v,如果出现版本号,说明npm也安装好了。

2.设置global和cache路径


设置路径能够把通过npm安装的模块集中在一起,便于管理。
(1)在nodejs的安装目录下,新建node_global和node_cache两个文件夹
(2)假设安装目录为E:\nodejs,在命令窗口分别输入以下命令

npm config set prefix "E:\nodejs\node_global"     设置global

npm config set cache "E:\nodejs\node_cache"       设置cache

设置成功后,后续用npm安装的模块就在E:\nodejs\node_global\node_modules里。

3.设置环境变量


说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径。
(1)修改用户变量PATH:把”E:\nodejs\node_global”加到后面。
(2)新增系统变量NODE_PATH:设置成“E:\nodejs\node_global\node_modules”。

4.安装淘宝镜像(cnpm)


由于,npm很多包部署在国外,使用cnpm可以加快我们的安装速度。
官网:http://npm.taobao.org/
安装命令:

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

检测:命令窗口输入 cnpm -v,出现版本号,说明安装成功。

5.安装 vue 和 vue脚手架构建工具(vue-cli


说明:简单来说vue-cli的作用是用已经配置好的模板快速构建一个项目,提供好基本的项目结构,不必我们自己手动配项目环境。
此时我们可以使用cnpm安装,安装命令(-g是指全局安装):

cnpm install -g vue
cnpm install -g vue-cli

至此,我们已经搭建好了vue项目开发所需要的环境以及工具了,接着,我们尝试新建一个vue项目并运行。

6.新建一个vue项目并运行


打开命令窗口,cd至新建项目的目录,比如(cd F:\vue),输入新建项目命令:

vue init webpack test      创建一个基于webpack的vue项目

webpack是vue-cli已经包含的一个打包工具。执行这个命令后会出现一系列的选项如下:

  • Project name ;项目名称
  • Project description (A Vue.js project) 项目描述 (A Vue.js project);
  • Author (XXXX XXXX@XXX.com) ;XXXX@XXX.com(项目作者);
  • Vue build ❯ Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any
    Vue-specific HTML) are ONLY allowed in .vue files - render functions
    are required elsewhere
    这里选择Runtime + Compiler: recommended for most
    users;
  • Install vue-router? (Y/n) 是否使用vue-router路由(y);
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint(n);
  • Setup unit tests with Karma + Mocha? (Y/n) 是否需要单元测试(n);
  • Setup e2e tests with Nightwatch? (Y/n) 是否需要单元测试(n);

接着安装项目依赖的模块,这些模块会被安装到 test\node_modul下,
node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
先cd到项目文件所在目录,然后输入安装命令:

    cnpm install

最后运行项目,同样cd到项目所在目录,输入运行命令:

cnpm run dev

这里写图片描述
完成之后,在浏览器地址栏输入 http://localhost:8080 ,出现下面这个页面就说明项目运行成功。
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值