vue 脚手架搭建,reactjs脚手架

2023-10-26 10:03:18 终极管理员知识笔记 49阅读

构建一个Vue项目，创建一个新的项目文件夹，并用npm或yarn初始化一个新的npm项目。mkdir my-vue-project CD my-vue-project NPM init-y

ode> 安装Vue和相关依赖。

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

安装Webpack及其相关依赖。

npm install webpack webpack-cli webpack-dev-server --save-dev

创建Webpack配置文件webpack.config.js并进行如下配置

const path  require(path);module.exports  {  entry: ./src/main.js,  output: {    path: path.resolve(__dirname, dist),    filename: bundle.js,  },  module: {    rules: [      {        test: /\.vue$/,        loader: vue-loader,      },      {        test: /\.js$/,        exclude: /node_modules/,        use: babel-loader,      },      // 可以添加其他规则如处理CSS、图片等    ],  },  resolve: {    alias: {      vue$: vue/dist/vue.esm.js,    },    extensions: [*, .js, .vue, .json],  },  devServer: {    contentBase: path.resolve(__dirname, dist),    compress: true,    port: 8080,  },};

在上述配置中entry指定了入口文件的路径output指定了输出文件的路径和名称。module.rules定义了Webpack处理不同类型文件的规则这里使用了vue-loader来处理Vue文件和babel-loader来处理JavaScript文件。resolve用于配置模块解析的别名和扩展名。devServer用于配置开发服务器。

创建项目结构在项目根目录下创建src文件夹并在其中创建main.js作为Vue应用程序的入口文件。

创建Vue组件和相关文件如.vue文件、.js文件和.css文件。

在package.json中添加启动命令

scripts: {  start: webpack-dev-server --open --config webpack.config.js}

运行启动命令以启动开发服务器。

npm start

现在你可以在浏览器中访问 构建React项目创建一个新的项目文件夹并使用npm或yarn初始化一个新的npm项目。

mkdir my-react-projectcd my-react-projectnpm init -y

 安装React和相关依赖。 npm install react react-dom --save
 安装Webpack及其相关依赖。 npm install webpack webpack-cli webpack-dev-server --save-dev
 创建Webpack配置文件webpack.config.js并进行如下配置 const path  require(path);module.exports  {  entry: ./src/index.js,  output: {    path: path.resolve(__dirname, dist),    filename: bundle.js,  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: babel-loader,      },      // 可以添加其他规则如处理CSS、图片等    ],  },  resolve: {    extensions: [*, .js, .jsx],  },  devServer: {    contentBase: path.resolve(__dirname, dist),    compress: true,    port: 8080,  },};
 在上述配置中entry指定了入口文件的路径output指定了输出文件的路径和名称。module.rules定义了Webpack处理不同类型文件的规则这里使用了babel-loader来处理JavaScript文件。resolve用于配置模块解析的扩展名。devServer用于配置开发服务器。
  创建项目结构在项目根目录下创建src文件夹并在其中创建index.js作为React应用程序的入口文件。
  创建React组件和相关文件如.js文件和.css文件。
  安装Babel及其相关依赖用于将JSX语法转换为普通的JavaScript语法。
  npm install babel/core babel/preset-react babel-loader --save-dev
 在项目根目录下创建.babelrc文件并进行如下配置 {  presets: [babel/preset-react]}
 在Webpack配置文件中添加对.jsx文件的处理规则 module.exports  {  // ...  module: {    rules: [      // ...      {        test: /\.jsx$/,        exclude: /node_modules/,        use: babel-loader,      },      // ...    ],  },  // ...};
 在package.json中添加启动命令 scripts: {  start: webpack-dev-server --open --config webpack.config.js}
 运行启动命令以启动开发服务器。 npm start
 现在你可以在浏览器中访问 
以上是使用Webpack构建Vue和React项目的基本步骤。你可以根据具体需求进行更复杂的配置和使用各种插件来优化你的应用程序构建过程。
  总结 在开发Vue和React项目时使用官方提供的脚手架工具能够帮助开发者快速搭建项目结构和配置开发环境。Vue CLI和Create React App是官方提供的两种常用脚手架工具而Vite则是一款新型的前端构建工具具有更快的启动和热更新速度。此外还可以通过手动配置构建工具或使用其他方式搭建脚手架。选择合适的脚手架方式能够提高开发效率让开发者更专注于业务逻辑的开发。当然这个也是根据公司需求如果要从0开始那就搭建。当然也有开发好的框架模板可以直接拿来使用。

标签：