Vue项目搭建

36次阅读

共计 785 个字符,预计需要花费 2 分钟才能阅读完成。

初次搭建,亦是一个学习的过程,有误的地方请多执教

1. 安装 Node.js 环境

官网下载:https://nodejs.org/en/download/
下载地址我都是默认地址没有改变,你们可以根据需要改变,记得安装地址就对了。
安装完输入 node -vnpm -v查看是否安装成功

安装 node 会自动安装 npm 所以不需要单独安装 npm,但是国内使用 npm 会比较慢,有的时候依赖会安装失败,这会先去装一个淘宝镜像:http://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装 vue cli

由于 vue cli 的包名称改成 @vue/cli,安装命令变为cnpm install -g @vue/cli
注:这里对 node.js 的版本要求是 8.9 或更高,这里推荐一个包管理器,nvm

安装完,输入 vue -V(这里的 V 是大写)

第一次运行的时候报错 vue 不是内部命令或外部命令,可能是因为 npm 版本太低了,需升级 npm 的版本

npm install -g npm

如果升级完还报错,就需要到环境配置修改下 PATH,先找到 vue.cmd 文件的地址,然后配置到 PATH 里面

修改完重新打开命令框再输入 vue -V 查看下版本

这一步成功了,就可以创建一个你自己的项目了

3. 创建项目

vue create 项目名

然后出现这样一个对话框,默认就好了,因为暂不确定自己新搭的项目需要哪些插件,所以决定按默认的安装,后期需要再手动安装好了。这里回车,注意项目名不要有大写字母


回车后慢慢等待,直到出现下图,就表面新项目已经创建成功了,这时候你只需要到项目根目录下运行 npm run serve 项目就可以运行了

运行后页面能正常打开就对了

4. 项目结构解析


剩下的根据你的需要再进行开发,不懂的先查文档,然后不懂的查文档,最后不懂的查完文档问百度吧。

正文完
 0

vue项目搭建

37次阅读

共计 448 个字符,预计需要花费 2 分钟才能阅读完成。

最近在研究前端框架,发现 vue 是国人写的一个前端框架,自然就引起了强烈的爱国情怀,学习一下。

  • 先来安装一下 node.js,如果没有安装的可以去官网下载对应的版本进行安装。

    安装完成后需要查看一下是否安装成功以及版本号是否与下载安装的一致。

  • 安装镜像,这里推荐安装淘宝的镜像。
    npm install -g cnpm –registry=https://registry.npm.taobao.org
  • 安装 webpack。
    cnpm install webpack -g

    • 根据模板创建项目,当然这里也可以使用 HBuikder X(或者其他)工具进行项目的创建。
      vue init webpack-simple 你的项目名称
    • 使用 HBuikder X 创建项目:

    • 根据自己的需要修改相关的信息即可。

    • 需要安装依赖,需要一段时间。

      依赖安装过程:
    • 运行项目即可正常访问页面了。


      访问上面的两个地址都可以。

  • 进入创建好的项目中安装项目依赖。
    npm install
  • 启动项目
    npm run dev

这就是 vue 项目的创建过程,以后会继续分享 vue 和 element 的整合。

正文完
 0