vue-cli如何转普通vue

Vue CLI转普通Vue的方法可以通过以下几步实现：1、创建新的普通Vue项目，2、迁移Vue组件和资源，3、配置Webpack，4、调整路由和状态管理，5、更新依赖和插件。在接下来的内容中，我们将详细描述每一步的具体操作和注意事项。

一、创建新的普通Vue项目

首先，我们需要在没有Vue CLI的情况下创建一个新的Vue项目。可以手动创建项目文件夹，并添加基本的HTML、CSS和JS文件结构。以下是创建普通Vue项目的步骤：

创建项目文件夹：
```
mkdir my-vue-project
cd my-vue-project
```

初始化项目：

创建一个index.html文件，并在其中添加基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue Project</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

创建一个main.js文件，并在其中初始化Vue实例：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    template: '<div>{{ message }}</div>'
});

二、迁移Vue组件和资源

接下来，我们需要将原来使用Vue CLI创建的项目中的Vue组件、静态资源等迁移到新的普通Vue项目中。具体步骤如下：

复制Vue组件：

将原项目中的.vue文件复制到普通Vue项目中，并调整相应的路径。

引入Vue组件：

在main.js中引入并注册Vue组件。例如：

import MyComponent from './components/MyComponent.vue';
new Vue({
    el: '#app',
    components: {
        MyComponent
    },
    template: '<MyComponent/>'
});

迁移静态资源：

将原项目中的静态资源（如图片、CSS文件）复制到普通Vue项目中，并调整相应的路径。

三、配置Webpack

如果需要使用Webpack进行构建和打包，可以手动配置Webpack。以下是配置Webpack的步骤：

安装Webpack及相关依赖：

npm install webpack webpack-cli vue-loader vue-template-compiler --save-dev

创建webpack.config.js文件，并进行基本配置：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

在package.json中添加构建脚本：

"scripts": {
    "build": "webpack --mode production"
}

运行构建命令：
```
npm run build
```

四、调整路由和状态管理

如果原项目使用了Vue Router和Vuex，需要在普通Vue项目中进行相应的调整和配置：

安装Vue Router和Vuex：
```
npm install vue-router vuex
```

配置Vue Router：

创建一个router.js文件，并进行路由配置：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        }
    ]
});

在main.js中引入并使用Vue Router：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

配置Vuex：

创建一个store.js文件，并进行状态管理配置：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment(context) {
            context.commit('increment');
        }
    }
});

在main.js中引入并使用Vuex：

import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
    el: '#app',
    store,
    render: h => h(App)
});

五、更新依赖和插件

最后，我们需要更新依赖和插件，以确保项目能够正常运行：

检查并更新依赖：

在package.json中检查依赖版本，并使用以下命令更新依赖：
```
npm install
```
检查并更新插件：

如果项目中使用了其他插件，需要检查并更新插件配置和版本。
运行项目：

使用以下命令启动项目，并检查是否有错误或警告：
```
npm run serve
```

通过以上步骤，我们可以将一个使用Vue CLI创建的项目转为一个普通的Vue项目。总结一下，主要步骤包括：创建新的普通Vue项目、迁移Vue组件和资源、配置Webpack、调整路由和状态管理、更新依赖和插件。通过这些步骤，可以确保项目能够正常运行，并且易于维护和扩展。

总之，Vue CLI转普通Vue的关键在于手动配置和迁移项目结构，同时确保所有依赖和插件都能够正常工作。如果在迁移过程中遇到问题，可以参考官方文档或寻求社区帮助。希望这些步骤和建议能够帮助你顺利完成项目迁移。