搭建Phoenix 1.4 + Webpack + Zurb Foundation

要搭建Phoenix 1.4 + Webpack + Zurb Foundation，你需要按照以下步骤进行设置：

1. 创建一个新的Phoenix项目：

   mix phx.new project_name
   

2. 进入项目目录：

   cd project_name
   

3. 安装Webpack：

   npm install --save-dev webpack babel-loader css-loader sass-loader
   

4. 在项目根目录下创建一个新的Webpack配置文件webpack.config.js：

   const path = require('path');
   
   module.exports = {
     entry: './assets/js/app.js',
     output: {
       path: path.resolve(__dirname, 'priv/static/js'),
       filename: 'app.js'
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader'
           }
         },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         },
         {
           test: /\.scss$/,
           use: ['style-loader', 'css-loader', 'sass-loader']
         }
       ]
     }
   };
   

5. 在assets目录下创建一个新的JavaScript文件app.js和一个新的SCSS文件app.scss：

   • app.js：

     import css from '../css/app.scss';
     import 'foundation-sites';
     

   • app.scss：

     @import 'foundation-sites/scss/foundation';
     

6. 修改assets/css/app.css文件名为assets/css/app.scss。

7. 安装Zurb Foundation：

   npm install --save foundation-sites
   

8. 在assets/js/app.js中添加Foundation的初始化代码：

   $(document).ready(() => {
     $(document).foundation();
   });
   

9. 修改lib/project_name_web/templates/layout/app.html.eex文件，将<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>">改为<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/js/app.js") %>">。

10. 运行Webpack构建：

    npx webpack --watch
    

11. 启动Phoenix服务器：

    mix phx.server
    

现在你已经成功搭建了Phoenix 1.4 + Webpack + Zurb Foundation的项目。你可以在assets/js/app.js中添加自己的JavaScript代码，并在assets/css/app.scss中添加自己的样式。