• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

用脚手架搭建一个 vue 项目

Linux codehhr 2574次浏览 0个评论

一、需要安装 node 环境

下载地址: https://nodejs.org/en/
中文网: http://nodejs.cn/

安装后为方便国内使用,可以把 npm 换成 taobao 的 cnpm (速度快)

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

检查是否安装成功,查看版本号

用脚手架搭建一个 vue 项目

二、全局安装 vue 脚手架

全局安装可能需要管理员权限( Windows 以管理员身份运行; Linux 加 sudo )

npm install -g @vue/cli
或者用 cnpm
cnpm install -g @vue/cli
简写
cnpm i -g @vue/cli

安装成功后可查看版本

vue -V  (大写V)

用脚手架搭建一个 vue 项目

三、创建项目

为方便编辑,我一般都在 vscode 里操作

1.比如创建一个叫 project 的项目

vue create project

如果安装了 cnpm 就会询问是否使用淘宝镜像(cnpm)

用脚手架搭建一个 vue 项目

都可以,只是影响网速快慢,我装了 cnpm,这里我填 Y

2.选择配置方式

用脚手架搭建一个 vue 项目

说明:

  • Default (babel,eslint): 默认配置
  • Manually select features: 手动选择配置

键盘上下就可以选择,选 Manually select features (最下面那个),俺不用默认配置

3.手动选择项目所需要的包

用脚手架搭建一个 vue 项目

说明:

  • Babel: Babel 编译,将 ES6 编译成 ES5,进行兼容
  • TypeScript: 给 JavaScript 添加特性的语言扩展
  • Progressive Web App (PWA) Support: 让网页渐进式变成 App
  • Router: Vue 路由
  • Vuex: Vue 状态管理
  • CSS Pre-processors: CSS 预编译器 (包括 SCSS/Sass、Less、Stylus)
  • Linter / Formatter: 代码检测和格式化
  • Unit Testing: 单元测试
  • E2E Testing: 端到端测试
根据需求进行勾选,上下键选择,空格是取消或选中,选完最后回车

如图:

用脚手架搭建一个 vue 项目

4.选择版本

用脚手架搭建一个 vue 项目

5.路由是否采用 history 模式

选啥都可以,之后可以改

用脚手架搭建一个 vue 项目

6.选择 CSS 编译方法

用脚手架搭建一个 vue 项目

按需选择,我选的 Less

7.选择代码规范

用脚手架搭建一个 vue 项目

我选的 Standard config

说明:

  • eslint with ... : 只进行报错提醒;
  • eslint + A ... : 不严谨模式;
  • eslint + S ... : 正常模式;
  • eslint + P ... : 严格模式;

8.选择合适代码检验规范

用脚手架搭建一个 vue 项目

lint on save,也就是报存时检验

9.选择放置配置的文件

用脚手架搭建一个 vue 项目

我选的第一个,放到一个独立文件里

10.是否保存配置为以后使用

用脚手架搭建一个 vue 项目

先不保存 (N)

11.安装完成

用脚手架搭建一个 vue 项目

运行项目

其实安装完成后有提示

cd project (进入项目根目录)
npm run serve

用脚手架搭建一个 vue 项目

会在本地 8000 端口运行

如图

用脚手架搭建一个 vue 项目

The_End


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明用脚手架搭建一个 vue 项目
喜欢 (0)

您必须 登录 才能发表评论!

加载中……