vue3.0搭建

vue搭建

1 安装nodejs
百度自己下载https://nodejs.org/en/

cmd操作
2 安装cnpm(淘宝国内加速)
npm install -g cnpm --registry=https://registry.npm.taobao.org

3 安装vue工具包
cnpm install -g @vue/cli

4 创建项目(cmd到自己项目想产生的位置)
vue create ownpage(项目名不能大写)

5 进入到项目根目录:添加iview依赖
cnpm install iview --save

6 进入到项目根目录:启动项目
npm run serve

7 打包
npm run build

创建项目步骤:

vue create ownpage (不可大写)

vue3.0搭建_第1张图片

第一个是你之前安装的项目配置,第二个是默认配置,最后一个是自行配置,建议选最后一个

回车,下一步

vue3.0搭建_第2张图片

这个自行选择配置,按上下键切换目标选项,按空格键勾选和取消,按a全选,按i反选,选好后回车确定

1.Babel,转译成浏览器可识别的语言,可以让你的项目支持更新的语法,如es6\es7等
2.TypeScript,新增的选项卡
3.PWA,模拟原生app,渐进式网络应用程序
4.路由
5.vuex管理模式
6.css预处理语言
7.代码规范
8.组件单元测试
9.端对端测试,模拟用户真实场景
常用选择1 4 5 6 7,五个就可。

回车,下一步

是否使用history模式。如果不想要很丑的 hash(访问路径多个#号),我们可以用路由的 history 模式,我选在y

回车,下一步,选择css预处理语言

vue3.0搭建_第3张图片

选择css预处理语言,我选第一个

回车,下一步,选择代码规范配置

vue3.0搭建_第4张图片

  1. 只进行报错提醒;
  2. 不严谨模式;
  3. 正常模式;
  4. 严格模式;

我选择第一个

回车,下一步,

vue3.0搭建_第5张图片

选择第一个,下次创建项目就会有本次的配置出现供你选择

回车,下一步,选择babel,postcss,eslint配置文件存放位置

vue3.0搭建_第6张图片

第一个方独立文件夹里,第二个放package.json里,建议选第一个

回车,下一步,填写项目描述

vue3.0搭建_第7张图片

y就添加,n就跳过,我y,设置了描述

回车,下一步,选择babel,postcss,eslint配置文件存放位置vue3.0搭建_第8张图片

第一个方独立文件夹里,第二个放package.json里,建议选第一个

回车,下一步,就开始创建项目,下载依赖

vue3.0搭建_第9张图片

等进度条完成,项目就创建好了。

vue3.0搭建_第10张图片

最后我们开始进入项目根目录,运行项目试试

  1. cd x:\xxx\xxx //进入你的项目根目录,或在你项目根目录shift+右键,点击在此处打开命令窗口

  2. 添加iview依赖
    cnpm install iview --save

  3. npm run serve //运行项目

你可能感兴趣的:(前端)