欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-14 23:42:00
安装node.js 官网:https://nodejs.org/en/ 淘宝NPM镜像(npm是外网,用国内代理下载安装贼快) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装 vue-cli $ cnpm i ......
  • 安装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进行创建。

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

 

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

完成之后进入项目

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

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

输入npm run dev,运行项目。

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

 

 

 

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

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

 

 

测试成功!