- 不急，先听我唠会嗑~
- 随着js发展的如此迅速，市场上越来越多的前端框架可以方便开发者使用。
- 本人大四渣渣一名，先后实习了两个地方，第一家公司用vuejs，实话我实习前没学过，到了那开始学的，我觉得上手并不难，会用也不难，看了三天文档，我就自己做了公司移动端的一个项目，页面处理逻辑处理调接口导数据展示，其实和react很类似。但那时深入的原理我了解的不够，人嘛，总是这样子的，有的人学到了精通才开始做项目，有的人比如我这种渣渣就喜欢先上手了看好不好用，在深入去学。当然我推荐刚开始学的小朋友先学原理哈哈。然后呢，第二个公司应该也就是我毕业后要去的公司，在那呢，我用的react，可能学react的人本来就多，我在学校的时候就稍微深入了解了一些，所以实习的时候基本上会用，忘了的就百度嘛，脑子就这么大，记这么多知识也不行，我还得记者我爸我妈的生日，还得记得我姐妹喜欢的口红牌子唉不扯远了，我的意思是，基础得有，不然面试的时候就过不去，但并不是什么都的记得一清二楚，有的时候查一查可能比你想来得快。（当然人的脑容量不同，也有一些过目不忘的大神嘻嘻）
- 我身边好多学弟学妹问我，学姐你觉得学什么框架好，其实吧，无论用哪一种都有他自己的优缺点，怎么评价一个前端攻城狮呢，你不能说他react多厉害，他就有多强，他不会react你就觉得他很low，万一人家是个vue大神，不惜的用怎么办，哈哈。还有些逻辑差一点但人家页面处理超级快，一天做个10多个页面那种（实习遇到的一个小姐姐）。对了我觉得就像打篮球，控球很好但投不准的人也有，投的很准控球不好的人也有，像科比一样完美的人也有（哈哈我高中时科比的迷妹），赢才是关键，算了还是不打比方了，反正就是没有什么标准来评价，只要能做完需求我觉得就够了
正文
- 总结了下两次实习项目前端的基础结构
-
根目录下：文件夹dir : idea 、build 、 node_modules、 src ;文件：webpack.dev.config.js 、 webpack.prod.config.js 、 .babelrc 、 .project 、package.json ...等等
简单介绍一下：
idea文件夹 里一般存放一些项目的配置文件，版本的控制文件等等
build文件夹 npm run build 打包后生成的文件
node_modules文件夹 npm install ... 下载一些相关依赖配置
src文件夹 主要的逻辑处理代码都写在这~下面还会分jsx\css\image等等
webpack.dev.config.js 配置文件（本地环境），这个大家应该用过的都知道
webpack.prod.config.js 配置文件（测试/开发环境）
.babelrc 设置转码规则
.project 一般用来定义项目结构
package.json 是npm init 后生成的记录着一些信息作者依赖等...
webpack.dev.config.js
const path = require( "path" );
const webpack = require( "webpack" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
const CleanWebpackPlugin = require( 'clean-webpack-plugin' ); //用来清空文件
const CopyWebpackPlugin = require( "copy-webpack-plugin" ); //复制文件或文件夹
module.exports = function ( env ) {
let set = {
devtool: "inline-source-map",
entry: {
index: "./src/jsx/index.jsx", //首页
vendor: [ "react", "react-dom", "zepto" ]
},
output: {
path: path.resolve( __dirname, "build" ),
// publicPath: "/",
filename: "[name].js"
},
resolve: {
extensions: [ ".jsx", ".js", ".es6", ".json" ]
},
module: {
rules: [
{
test: require.resolve( 'zepto' ),
loader: 'exports-loader?window.Zepto!script-loader'
},
{
test: /\.jsx$/,
use: "babel-loader",
include: path.resolve( __dirname, "src" ) //Webpack2建议尽量避免exclude，更倾向于使用include。
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [ {
loader: "url-loader",
options: {
limit: 5000,
name: 'images/[name].[ext]' // 将图片都放入images文件夹下
}
} ]
},
{
test: /\.(woff2?|eot|woff|ttf|otf)(\?.*)?$/,
use: [ {
loader: "url-loader",
options: {
limit: 5000,
name: 'fonts/[name].[ext]'
}
} ]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract( {
fallback: "style-loader",
use: [ "css-loader", "postcss-loader" ]
} )
},
{
test: /\.styl$/,
use: ExtractTextPlugin.extract( {
use: [ "css-loader", "postcss-loader", "stylus-loader" ]
} )
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract( {
use: [ "css-loader", "postcss-loader", "less-loader" ]
} )
}
]
},
plugins: [
new ExtractTextPlugin( {
filename: "[name].css"
} ),
new webpack.DefinePlugin( {
'process.env': {
NODE_ENV: '"production"'
}
} ),
new webpack.optimize.CommonsChunkPlugin( {
name: 'vendor' // 指定公共 bundle 的名字。
} ),
new webpack.ProvidePlugin( {
$: 'zepto'
} ),
new CleanWebpackPlugin( //匹配删除的文件
[
path.resolve( __dirname, "build" ) + "/*.js",
path.resolve( __dirname, "build" ) + "/*.css",
path.resolve( __dirname, "build/images" ) + "/*"
], {
root: __dirname, //根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
}
),
new CopyWebpackPlugin( [ {
from: path.resolve( __dirname, "src/images" ),
to: path.resolve( __dirname, "build/images" )
}, {
context: path.resolve( __dirname, "src/jslib" ),
from: "*.js",
to: path.resolve( __dirname, "build/jslib" )
}, {
context: path.resolve( __dirname, "src/customstyle" ),
from: "*.css",
to: path.resolve( __dirname, "build/customstyle" )
} ] )
]
};
Object.keys( set.entry )
.forEach( v => {
v != "vendor" && set.plugins.push(
new HtmlWebpackPlugin( {
filename: v + ".html",
template: "./src/template.html",
chunks: [ 'vendor', v ],
inject: true //插入开关
} )
)
} );
return set;
};package.json
{
"name": "livia",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --open",
"build": "cross-env NODE_ENV=release webpack --progress --colors"
},
"keywords": [],
"author": "livia",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.25.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.26.4",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^1.3.3",
"script-loader": "^0.7.0",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.9",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.5.0"
},
"dependencies": {
"hcz-native-bridge": "^0.1.5",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mobile-datepicker": "^3.0.4",
"react-pullload": "^1.0.6",
"zepto": "^1.2.0"
}
}
说一些可能没用的~
- (站在前端角度不懂的很多) 很多时候一个项目都是由一个小组完成的，小组成员可能包括产品，ui,前端，后端，测试，运营等等。
- 立项前会进行一些评估(可行性分析，风险测评，BRD/MRD等等)
- 立项后，产品经理组织各部门召开需求会议，梳理需求建立初步产品原型，经过一系列的讨论调整确定最终产品原型后，ui根据此做出ui设计图，前后端联调接口，前端根据ui设计图和后端提供的入参反参接口实现页面逻辑功能，通过一系列测试后才能实现。
今天先说个大概，等哪天心情好了再说多一些我会的小分享~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。