十九.使用Vue脚手架
本文最后更新于 1504 天前,其中的信息可能已经有所发展或是发生改变。

1.Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。
1. 安装3.x版本的Vue脚手架:
npm install -g @vue/cli
2. 基于3.x版本的脚手架创建Vue项目:
1. 使用命令创建Vue项目
命令:vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由:n
ESLint选择:ESLint + Standard config
何时进行ESLint语法校验:Lint on save
babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
是否保存为模板:n
使用哪个工具安装包:npm
2. 基于ui界面创建Vue项目
命令:vue ui
在自动打开的创建项目网页中配置项目信息。
3. 基于2.x的旧模板,创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

  1. 分析Vue脚手架生成的项目结构
    node_modules:依赖包目录
    public:静态资源目录
    src:源码目录
    src/assets:资源目录
    src/components:组件目录
    src/views:视图组件目录
    src/App.vue:根组件
    src/main.js:入口js
    src/router.js:路由js
    babel.config.js:babel配置文件
    .eslintrc.js:

2.Vue脚手架的自定义配置

  1. 通过 package.json 进行配置 不推荐使用
        "vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }
  1. 通过单独的配置文件进行配置,创建vue.config.js
        module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

3.Element-UI的基本使用

ElementUI参考文档
Element-UI:一套基于2.0的桌面端组件库
1. 安装:
npm install element-ui -S
2. 导入使用:

    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";

    Vue.use(ElementUI)

这是全部导入,建议部分导入

作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇