Vue框架之Vue脚手架

◆ Vue脚手架作用:

Vue脚手架可以快速生成Vue项目基础的架构。

◆ Vue脚手架安装:
npm install -g @vue/cli
◆使用命令创建Vue项目
vue create my-project
  1. 选择Manually select features(选择特性以创建项目)
  2. 勾选特性可以用空格进行勾选。
  3. 是否选用历史模式的路由:n
  4. ESLint选择:ESLint + Standard config
  5. 何时进行ESLint语法校验:Lint on save
  6. babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
  7. 是否保存为模板:n
  8. 使用哪个工具安装包:npm
◆ 基于ui界面创建Vue项目

在自动打开的创建项目网页中配置项目信息。

vue ui
◆ 基于2.x的旧模板创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project
◆ 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:
◆ Vue脚手架的自定义配置:

通过单独的配置文件进行配置,创建vue.config.js

module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}

通过 package.json 进行配置 [不推荐使用]

 "vue":{
     "devServer":{
         "port":"9990",
         "open":true
     }
 }
发布了292 篇原创文章 · 获赞 6 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/sky6even/article/details/104074086