Vue+TypeScripts搭建一个项目

首先，安装node环境

npm 的下载包地址 registry.npmjs.org ，该地址属于国外网址，下包速度比较慢

为了提高下载速度：
可以安装工具 nrm ,

npm -install nrm -g

　该工具提供了几个最常用的下包的地址,查看方式

nrm ls

查看下包地址的效率

nrm test [name]

使用方法：

nrm use [name]　　// 将npm下载源切换成指定的源
nrm use yarn

检查有没有安装vue脚手架

vue -V

如果没有，先安装

npm i -g @vue/cli

再检查脚手架版本，如果还不是命令，需要配置一下环境变量

找到用户下 AppData\Roaming\npm ，配置到path里

配置好环境后，就可以开始创建项目啦

vue create vue_demo //项目名字

选手动配置

看需要选择：（按空格键和下）

Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）
TypeScript：使用TypeScript进行源码编写
Progressive Web App(PWA)：使用渐进式网页应用（PWA）
Router：使用vue-router
Vuex：使用vuex状态管理器
CSS Pre-processors：使用CSS预处理器，比如：less，sass等
Linter/Formatter：使用代码风格检查和格式化
Unit Testing：使用单元测试
E2E Testing：使用E2E测试, end to end（端到端）

选择vue版本

是否使用Class（类）风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例

使用Babel做转义, 与TypeScript一起用于自动检测

路由模式, 是否选择history模式

选择一种css 预处理器

选择一种代码格式化检测工具

保存时检查 or 提交时检查

选择一种单元测试的方案

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里?

是否需要保存当前配置

然后装依赖，就可以了。

配置路由：

router/index.js

export default {

path: "/analysis",

meta: {

title: "成绩分析",

icon: "grade-manage",

breadcrumb: false,

realPath: "/analysis"

component: Layout,

children: [

{

path: "ready",

name: "AnalysisReady",

meta: {

title: "数据准备",

realPath: "/analysis/ready"

component: () => import("@/views/analysis/ready")

]

};


import 模块对象
export const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/login/index"),
    meta: {
      realPath: "/login"
    },
    hidden: true
  },
模块对象 //如果是数组需要解构一下
]

main.js

posted @ 2021-01-13 10:44 Jennyishere 阅读(545) 评论(0) 收藏举报

刷新页面返回顶部

Jennyishere

Vue+TypeScripts搭建一个项目

公告