adapt

windows快速开始Vue项目的搭建
1. 安装Node.js 2. 安装cnpm 3. 安装vue-cli 4. 创建vue项目 5. 运行...
扫描右侧二维码阅读全文
06
2019/04

windows快速开始Vue项目的搭建

1. 安装Node.js

由于Vue项目需要通过webpack工具来构建,而webpack依赖于Node.js环境。所以首先安装Node.js。前往其官网下载相应的windows的msi版本。安装完成后使用管理员运行Cmd窗口输入:npm -v查看是否安装成功

2. 安装cnpm

利用国内镜像服务器下载cnpm比较快速,这里使用淘宝网的镜像地址。同样在cmd窗口输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 并回车下载cnpm。安装完成输入cnpm看是否返回了cnpm的各种命令,是则说明安装成功

3. 安装vue-cli

vue-cli是Vue官方提供的命令行工具,能够快速搭建大型单页应用。该工具同样在cmd窗口输入:cnpm install -g vue-cli并回车安装。安装完成后输入vue查看是否返回vue相关命令

4. 创建vue项目

在cmd命令窗口输入:vue init webpack first_vue,其中first_vue可替换为你想要安装vue项目的其他地址。或者先cd进入相关的目录再运行上述命令,会直接在当前目录创建vue项目。
运行后,会让你设置Project name、Project description、Author (***)等信息,这几个信息都可以直接回车使用默认的设置

注意:

  1. 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
  2. Install vue-router? (Y/n) y 是否使用vue-router,这里根据需求选择
  3. Use ESLint to lint your code? (Y/n)n 是否使用ESLint,这里根据需求选择
  4. Setup unit tests with Karma + Mocha? (Y/n) 是否需要单元测试,这里根据需求选择
  5. Setup e2e tests with Nightwatch? (Y/n) 是否需要单元测试,这里根据需求选择
  6. 在三项的选项中,选择第一项:使用NPM,然后会自动运行npm install创建。等待创建完成即可

5. 运行vue项目

cd 进入first_vue文件夹(上述自己设定的vue项目文件名)然后运行npm run dev即可进入开发环境,会占用本地8080端口(若是你在本地想把项目启动在其他端口上,只需在:项目/config/index.js文件下dev配置下的port改为你需要的端口就行),这时打开http://localhost:8080/就可以在浏览器中看到vue项目已经运行起来了。

最后修改:2019 年 09 月 14 日 02 : 03 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论