vue cli 实现

Vue CLI 实现步骤

安装 Vue CLI 确保 Node.js 版本在 8.9 或以上。通过 npm 全局安装 Vue CLI：

npm install -g @vue/cli

创建新项目 使用以下命令初始化项目，按提示选择配置（如 Babel、Router 等）：

vue create project-name

启动开发服务器 进入项目目录并运行开发模式：

cd project-name
npm run serve

项目结构说明

src/ 目录包含核心代码：

• main.js 为应用入口文件
• App.vue 为根组件
• components/ 存放可复用组件

public/ 目录存放静态资源：

• index.html 为主页面模板
• 可直接引用的图片等资源

添加 Vue Router

安装路由插件（若创建时未选择）：

vue add router

配置路由 在 src/router/index.js 中定义路由规则：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

状态管理（Vuex）

安装 Vuex 状态管理：

vue add vuex

创建 store 在 src/store/index.js 中初始化：

export default new Vuex.Store({
  state: { count: 0 },
  mutations: { increment(state) { state.count++ } }
})

生产环境构建

生成优化后的生产环境代码：

npm run build

输出文件位于 dist/ 目录，包含：

• 压缩后的 JavaScript 文件
• 提取的 CSS 文件
• 静态资源（带 hash 文件名）

自定义配置

修改 vue.config.js 可覆盖默认配置：

module.exports = {
  devServer: { port: 8080 },
  chainWebpack: config => { /* 修改 webpack 配置 */ }
}