[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 ......
-
官网:
-
淘宝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
,运行项目。
打开浏览器输入项目挂载地址
上一篇: Chocolaty
推荐阅读
-
AE软件怎么快速建立一个新项目?
-
webpack4+Vue搭建自己的Vue-cli项目过程分享
-
Spring boot 入门(一):快速搭建Spring boot项目
-
JCreator Pro怎么用?用JCreator Pro快速建立一个新项目教程
-
用Eclipse搭建Android开发环境并创建第一个Android项目(eclipse+android sdk)
-
Vue使用NPM方式搭建项目
-
Win10中Vue.js的安装和项目搭建
-
使用vue-cli脚手架工具搭建vue-webpack项目
-
Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之二 || 后端项目搭建
-
从零开始学习搭建React脚手架项目