vue-cli3+ts环境搭建vue-cli3 + ts 环境搭建
技术栈
- typescript
- vue-cli 3.x+
- yarn
- sass
- element-ui
- vuex
配置
1. npm install -g @vue/cli（版本 vue-cli3）
# OR
yarn global add @vue/cli
2. vue create project-name
# OR
vue ui
选配
Please pick a preset:
-> Manually select features
-> Babel | TypeScript | Router | Vuex  | Css Pre-processors | Liner / Formatter
校验
Pick a linter / formatter config
-> TSLint
保存的时校验还是提交时校验，选择保存时
Pink additional lint features
->Lint on save
单独存放还是集成在package.json，选择单独存放
Where do you prefer placing config for Babel, PstCSS, ESLint, etc?
-> In dedicated config files
将此保存为将来项⽬的预设
Save this as a preset for future projects ?
-> NO
运⾏
yarn serve
⽬录
public
- index.html
src
- assets: 静态资源
- components：公共组件
- router：路由
- store：数据
- views：容器组件
- App.vue：根组件
- main.ts：⼊⼝
-
shims-tsx.d.ts
- shims-vue.d.ts
.browserslistrc：项⽬的⽬标浏览器的范围，会被 @babel/preset-env 和 Autoprefixer ⽤来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。    .gitignore
package.json：项⽬及⼯具的依赖配置⽂件
tsconfig.json：ts的配置⽂件
tsline.json
cli3 安装后已有插件
vue-class-component：使⽤ TypeScript装饰器增强 Vue 组件
vue-property-decorator：增强更多的结合 Vue 特性的装饰器
vue-router
vuex
node-sass
sass-loader
typescript
element-ui
全部引⼊：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
按需引⼊：
- 插件:yarn add babel-plugin-component -D
-
.babelrc
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
- 引⼊：
import { Button, Select } from 'element-ui';
Vue.use(Button).use(Select)
yarn add @vue/babel-preset-app -D
presets: [
javascript的特性
'@vue/app',
{
polyfills: [
'es6.promise',
'es6.symbol'
]
}
],
err: Module build failed (from ./node_modules/babel-loader/lib/index.js)        yarn add @babel/core @babel/preset-env -D
vue-loader
解决：Cannot find module .vue
/zh/guide/
npm install vue-loader -D
根⽬录新建fig.js:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引⼊这个插件！
new VueLoaderPlugin()
]
}
vueRouter
import Router, { RouteConfig } from 'vue-router';
- RouteConfig的类型定义：
interface RouteConfig = {
path: string; //路径
component?: Component;
name?: string; // 命名路由
components?: { [name: string]: Component }; // 命名视图组件
redirect?: string | Location | Function; //重定向
props?: boolean | Object | Function;
alias?: string | Array<string>; //别名
children?: Array<RouteConfig>; // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void;
meta?: any; //路由元信息使⽤$a.属性可以获取
// 2.6.0+
caseSensitive?: boolean; // 匹配规则是否⼤⼩写敏感？(默认值：false)
pathToRegexpOptions?: Object; // 编译正则的选项
}
tslint 规则 ：去掉tslint规则 - 删除"extends": [// “tslint:recommended”]即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。