T O P

[资源分享]     用脚手架搭建一个 vue 项目

  • By - 楼主

  • 2021-02-28 16:01:39
  • 一、需要安装 node 环境

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

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

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

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

    node

    二、全局安装 vue 脚手架

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

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

    安装成功后可查看版本

    vue -V  (大写V)
    

    vueversion

    三、创建项目

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

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

    vue create project
    

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

    vuecreateusecnpm

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

    2.选择配置方式

    vuecreatechooseconf

    说明:

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

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

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

    vuecreateconf

    说明:

    • 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: 端到端测试
    根据需求进行勾选,上下键选择,空格是取消或选中,选完最后回车

    如图:

    vuecreateconfafter

    4.选择版本

    vuecreatechooseversion

    5.路由是否采用 history 模式

    选啥都可以,之后可以改

    vuecreateusehistoryforrouter

    6.选择 CSS 编译方法

    vuecreatepickcssway

    按需选择,我选的 Less

    7.选择代码规范

    vuecreatepickeslintway

    我选的 Standard config

    说明:

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

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

    vuecreatelintonsave

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

    9.选择放置配置的文件

    vuecreateconfplace

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

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

    vuecreatesaveconf

    先不保存 (N)

    11.安装完成

    vuecreatedone

    运行项目

    其实安装完成后有提示

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

    vuenpmrunserve

    会在本地 8000 端口运行

    如图

    vuerunning

    The_End

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册