当前位置： 移动技术网 > IT编程>开发语言>JavaScript > [vue学习]快速搭建一个项目

[vue学习]快速搭建一个项目

2020年01月02日  | 移动技术网IT编程  | 我要评论

  • 安装node.js

    官网：

  • 淘宝npm镜像（npm是外网，用国内代理下载安装贼快）

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

  • 全局安装 vue-cli

    $ cnpm install --global vue-cli

  • 创建一个基于 webpack 模板的新项目

    $ vue init webpack my-project

  • 在命令行输出以上的命令后，出现一些项目的初始选项，简单翻译如下，根据项目需求配置

 ? project name my-project  // 项目名称
 ? project description a vue.js project  // 项目描述
 ? author runoob  // 作者
 ? vue build standalone  // 项目名称
 ? use eslint to lint your code? yes  // 是否使用es规范
 ? pick an eslint preset standard  // 选择eslint预设标准
 ? setup unit tests with karma + mocha? yes  // 使用karma + mocha设置单元测试
 ? setup e2e tests with nightwatch? yes  // 用夜表设置e2e测试

项目创建好之后，进入项目文件夹根目录的终端

输入以下指令

  • 安装依赖

    $ npm install

  • 启动服务

    vue@2.x：

    $ npm run dev

    vue@3.x：

    $ npm run serve

 

除了这种方法，还可以使用编译器一键创建项目

例如：我使用的是webstorm

新建项目，选择vue.js（以vue@2.x为例），接下来选择项目位置、版本等等，一切准备好之后点击next进行创建。

 

接下来同样需要进行一些初始配置，是否使用eslint、是否安装路由等等......

完成之后进入项目

最后点击左下角的终端（terminal），输入npm install安装初始依赖，启动项目和上面的一样，不再赘述！

输入npm run dev，运行项目。

 

 

 

 

打开浏览器输入项目挂载地址

 

 

测试成功！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网