- 不急,先聽我嘮會嗑~
- 跟着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設計圖和後端供應的入參反參接口完成頁面邏輯功用,經由過程一系列測試后才完成。
本日先說個也許,等哪天心境好了再說多一些我會的小分享~