Vue 在Mac下搭建vue脚手架

Vue 451 浏览

        前后端分离作为最近几年开发的主流方式,虽然我们是做后端的,但是必要的前端知识也是要了解的,所以这里我尝试搭建了下vue的框架(Mac下):

| 安装node

    我们先查看下是否安装了node

node -v

# 示例
$ node -v
v11.14.0

    如上述则说明已经安装了node,查看npm版本,安装好node也就有了npm,npm是node的依赖管理工具

npm -v

# 示例
$ npm -v
6.9.0

    如果没有安装的话,我们就安装下。我是在mac下开发的,已经安装了Homebrew,所以我这里直接安装:

brew install node

| 安装cnpm

    国内环境原因,安装依赖包需要翻墙,网速太慢。所以,我们需要国内镜像为我们服务:

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

    后面需要用 npm 的地方就可以用 cnpm 来执行了,安装依赖速度飞快。

| 安装Vue

    直接npm安装vue,方便快捷。

cnpm install vue

| 全局安装vue-cli脚手架构建工具

    到这里我们基本完成了搭建。

cnpm install --global vue-cli

| 创建新项目

    如果没有项目的话,我们就初始化一个新项目,原本就有项目话,就不需要这一步了。初始化新项目会让我们选择一些信息,不想填的话直接回车跳过就行了。

# 创建一个新项目
vue init webpack web.itspire.com
# 创建一个简单的新项目,默认加载模块很少
vue init webpack-simple web.itspire.com

# 示例
$ vue init webpack-simple web.itspire.com

? Project name web.itspire.com
? Project description A Vue.js project
? Author bzing
? License MIT
? Use sass? No

   vue-cli · Generated "web.itspire.com".

   To get started:
   
     cd web.itspire.com
     npm install
     npm run dev

| 安装依赖

     这时候我们就可以根据提示去操作了。

# 进入项目目录
cd web.itspire.com

# 安装依赖
cnpm install

| 运行项目

    执行以下命令,运行成功则自动打开vue欢迎页面

cnpm run dev
|  版权声明:本文为博主原创文章,转载请注明出处。