菜鸟运行第一个vue项目记录

近期打算着手重构现有的测试平台，由于现在用的平台是layui+flask+uwsgi+nginx框架大家都已经比较熟悉了。所以在新平台选型时本着让大家多接触新东西、新挑战的原则。平台重构选用的框架为vue+flask+element-ui。

记录如下，供成员翻阅：

我们要有的东西：

node.js
vue-cli
cnpm

首先完成node.js安装

试了几个官方渠道，略慢。这个快一些：http://www.pc6.com/softview/SoftView_209026.html
安装完成后 node -v验证

第二步安装cnpm，命令行输入命令 npm install -g cnpm --registry="http://registry.npm.taobao.org"，等待安装完成。

此步骤是为了使用cnpm命令来代替npm命令来安装各种包
使用cnpm -v 验证安装是否成功

下一步安装vue-cli（脚手架），命令行命令 cnpm install -g vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

准备工作做完之后，完成以下操作：

cd 到项目目录并按步骤提示创建，命令：vue init webpack 你项目名称
最后一步选N，单独运行cnpm install ，快

? Project name testpro
? Project description A Vue.js project
? Author olaheihei <xxxxx>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

切换目录至 你项目名称，运行命令：cnpm install，安装项目依赖包到 node-modules 目录。

最后一步，运行项目：

命令行cd到刚刚创建的项目目录 /testpro
输入命令 npm run dev

浏览器访问：http://localhost:8080/

你的第一个vue项目就运行成功了

参考：

https://segmentfault.com/a/1190000009871504

https://www.jianshu.com/p/ead7317d01ec

菜鸟运行第一个vue项目记录相关推荐

多个vue项目合并成一个_零基础搭建一个Vue项目，你学会了吗？
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）
开发Vue程序的第一步就是PC安装配置node.js 1官网下载安装Node(我的安装路径是D:\nodejs\) 点我安装(安装在除C盘外任意一个磁盘中) 2 检查node和npm是否安装完成下载 ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
VsCode创建第一个vue项目
转载自:https://www.cnblogs.com/z45281625/p/9015380.html VsCode创建第一个vue项目使用vue-cli快速构建项目 ( vue-cli 是vu ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目实例交流前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
如何开始一个vue项目
万事开头难~ 刚开始学习vue.js就是看看官方文档,然后在.html文件里引入下载到本地的vue的库文件,来跟着敲示例代码.但是接触到vue的项目,发现自己完全不知从何下手.之后再网上查找了一些vu ...

菜鸟运行第一个vue项目记录

菜鸟运行第一个vue项目记录相关推荐

最新文章

热门文章