vue2.0搭建vue脚手架(vue

2024-07-15 16:12| 来源: 网络整理| 查看: 265

1.首先要安装node.js

下载地址 https://nodejs.org/en/

安装完成后，在cmd命令行里面键入node -v查看版本

C:\Users\lh188>node -v v8.9.3

我们需要的npm功能已经在node中集成，输入npm -v查看版本

C:\Users\lh188>node -v v8.9.3

展示版本号，代表已经安装成功。

2.由于npm的部分资源被强，我们需要安装cnpm，相当于国内的镜像地址。在命令行里键入

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

等待安装完成后输入cnpm -v查看版本

C:\Users\lh188>cnpm -v [email protected] (D:\dev\nodejs\node_modules\cnpm\lib\parse_argv.js) [email protected] (D:\dev\nodejs\node_modules\npm\lib\npm.js) [email protected] (D:\dev\nodejs\node.exe) [email protected] (D:\dev\nodejs\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=D:\dev\nodejs win32 x64 10.0.17134 registry=https://registry.npm.taobao.org

这个版本和npm是不一样的。使用方法就是需要用npm的地方用cnpm代替。

3.安装vue 键入

cnpm install vue

4.安装vue-cli 键入

cnpm install --global vue-cli

5.创建一个基于 webpack 模板的新项目新建一个项目文件路径，在命令行中进入要新建项目的文件路径下键入

vue init webpack my-project

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

需要注意的是项目的名称不能大写，不然会报错。

Project name (my-project) # 项目名称（我的项目）

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者（你的名字）

Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？（Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？（Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？（Y/ N）

6.安装完成后，运行项目在命令行中进入项目文件目录下键入

npm run dev

在浏览器输入完成显示的地址：http://localhost:8080

DONE Compiled successfully in 4254ms 10:51:13 I Your application is running here: http://localhost:8080

看到下图说明项目构建成功

image.png

7，集成element-ui 在项目目录的命令行输入

npm i element-ui -S

安装完成后在项目的main.js增加import

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //单独引入样式文件 Vue.use(ElementUI)

至此，集成了Element-ui的vue-cli脚手架搭建完成

8.推荐使用ide Visual Studio Code

【本文地址】

公司简介

联系我们